@next2d/display 2.13.1 → 3.0.1

package/src/DisplayObjectContainer/usecase/DisplayObjectContainerGenerateRenderQueueUseCase.js

@@ -6,8 +6,12 @@ import { execute as textFieldGenerateRenderQueueUseCase } from "../../TextField/
 import { execute as videoGenerateRenderQueueUseCase } from "../../Video/usecase/VideoGenerateRenderQueueUseCase";
 import { execute as displayObjectIsMaskReflectedInDisplayUseCase } from "../../DisplayObject/usecase/DisplayObjectIsMaskReflectedInDisplayUseCase";
 import { execute as displayObjectContainerGenerateClipQueueUseCase } from "../../DisplayObjectContainer/usecase/DisplayObjectContainerGenerateClipQueueUseCase";
+import { execute as displayObjectBlendToNumberService } from "../../DisplayObject/service/DisplayObjectBlendToNumberService";
+import { execute as displayObjectContainerGetLayerBoundsUseCase } from "./DisplayObjectContainerGetLayerBoundsUseCase";
+import { execute as displayObjectContainerCalcBoundsMatrixUseCase } from "../../DisplayObjectContainer/usecase/DisplayObjectContainerCalcBoundsMatrixUseCase";
 import { renderQueue } from "@next2d/render-queue";
-import { $clamp, $RENDERER_CONTAINER_TYPE } from "../../DisplayObjectUtil";
+import { $cacheStore } from "@next2d/cache";
+import { $clamp, $getBoundsArray, $poolBoundsArray, $RENDERER_CONTAINER_TYPE, $getFloat32Array8, $getFloat32Array6 } from "../../DisplayObjectUtil";
 import { ColorTransform, Matrix } from "@next2d/geom";
 /**
  * @description renderer workerに渡すコンテナの描画データを生成
@@ -30,7 +34,11 @@ export const execute = (display_object_container, image_bitmaps, matrix, color_t
     }
     // transformed ColorTransform(tColorTransform)
     const rawColor = displayObjectGetRawColorTransformUseCase(display_object_container);
-    const tColorTransform = rawColor
+    let tColorTransform = rawColor
+        && (rawColor[0] !== 1 || rawColor[1] !== 1
+            || rawColor[2] !== 1 || rawColor[3] !== 1
+            || rawColor[4] !== 0 || rawColor[5] !== 0
+            || rawColor[6] !== 0 || rawColor[7] !== 0)
         ? ColorTransform.multiply(color_transform, rawColor)
         : color_transform;
     const alpha = $clamp(tColorTransform[3] + tColorTransform[7] / 255, 0, 1, 0);
@@ -51,7 +59,10 @@ export const execute = (display_object_container, image_bitmaps, matrix, color_t
     }
     // transformed matrix(tMatrix)
     const rawMatrix = displayObjectGetRawMatrixUseCase(display_object_container);
-    const tMatrix = rawMatrix
+    let tMatrix = rawMatrix
+        && (rawMatrix[0] !== 1 || rawMatrix[1] !== 0
+            || rawMatrix[2] !== 0 || rawMatrix[3] !== 1
+            || rawMatrix[4] !== 0 || rawMatrix[5] !== 0)
         ? Matrix.multiply(matrix, rawMatrix)
         : matrix;
     // size zero
@@ -67,6 +78,133 @@ export const execute = (display_object_container, image_bitmaps, matrix, color_t
         return;
     }
     renderQueue.push(1, $RENDERER_CONTAINER_TYPE);
+    // blendMode
+    const blendMode = display_object_container.blendMode;
+    renderQueue.push(displayObjectBlendToNumberService(blendMode));
+    // filters
+    const filters = display_object_container.filters;
+    if (filters) {
+        const filterKey = $cacheStore.generateFilterKeys(tMatrix[0], tMatrix[1], tMatrix[2], tMatrix[3]);
+        const filterCache = $cacheStore.get(`${display_object_container.instanceId}`, `${filterKey}`);
+        let updated = false;
+        const params = [];
+        const bounds = $getBoundsArray(0, 0, 0, 0);
+        for (let idx = 0; idx < filters.length; idx++) {
+            const filter = filters[idx];
+            if (!filter || !filter.canApplyFilter()) {
+                continue;
+            }
+            // フィルターが更新されたかをチェック
+            if (filter.$updated) {
+                updated = true;
+            }
+            filter.$updated = false;
+            filter.getBounds(bounds);
+            const buffer = filter.toNumberArray();
+            for (let idx = 0; idx < buffer.length; idx += 4096) {
+                params.push(...buffer.subarray(idx, idx + 4096));
+            }
+        }
+        const useFilfer = params.length > 0;
+        if (useFilfer) {
+            // 子の変更があった場合は親のフラグが立っているので更新
+            if (!updated) {
+                updated = display_object_container.changed;
+            }
+            const layerBounds = displayObjectContainerGetLayerBoundsUseCase(display_object_container, matrix);
+            if (filterCache) {
+                // キャッシュがあって、変更がなければキャッシュを使用
+                if (!updated) {
+                    renderQueue.push(1, Math.ceil(Math.abs(layerBounds[2] - layerBounds[0])), Math.ceil(Math.abs(layerBounds[3] - layerBounds[1])), 1, 1, display_object_container.instanceId, filterKey, bounds[0], bounds[1], bounds[2], bounds[3], tMatrix[0], tMatrix[1], tMatrix[2], tMatrix[3], layerBounds[0], layerBounds[1], tColorTransform[0], tColorTransform[1], tColorTransform[2], tColorTransform[3], tColorTransform[4], tColorTransform[5], tColorTransform[6], tColorTransform[7]);
+                    $poolBoundsArray(layerBounds);
+                    $poolBoundsArray(bounds);
+                    if (tColorTransform !== color_transform) {
+                        ColorTransform.release(tColorTransform);
+                    }
+                    if (tMatrix !== matrix) {
+                        Matrix.release(tMatrix);
+                    }
+                    return;
+                }
+                // どこかで変更があったので、キャッシュを削除
+                $cacheStore.removeById(`${display_object_container.instanceId}`);
+            }
+            renderQueue.push(1, Math.ceil(Math.abs(layerBounds[2] - layerBounds[0])), Math.ceil(Math.abs(layerBounds[3] - layerBounds[1])), 1, 0, display_object_container.instanceId, filterKey, bounds[0], bounds[1], bounds[2], bounds[3], tMatrix[0], tMatrix[1], tMatrix[2], tMatrix[3], layerBounds[0], layerBounds[1], tColorTransform[0], tColorTransform[1], tColorTransform[2], tColorTransform[3], tColorTransform[4], tColorTransform[5], tColorTransform[6], tColorTransform[7], params.length);
+            renderQueue.set(new Float32Array(params));
+            const fa0 = tMatrix[0];
+            const fa1 = tMatrix[1];
+            const fa2 = tMatrix[2];
+            const fa3 = tMatrix[3];
+            const faTx = tMatrix[4] - layerBounds[0];
+            const faTy = tMatrix[5] - layerBounds[1];
+            if (tMatrix !== matrix) {
+                Matrix.release(tMatrix);
+            }
+            tMatrix = $getFloat32Array6(fa0, fa1, fa2, fa3, faTx, faTy);
+            if (tColorTransform !== color_transform) {
+                ColorTransform.release(tColorTransform);
+            }
+            tColorTransform = $getFloat32Array8(1, 1, 1, 1, 0, 0, 0, 0);
+            $poolBoundsArray(layerBounds);
+            $cacheStore.set(`${display_object_container.instanceId}`, `${filterKey}`, true);
+        }
+        else {
+            if (blendMode === "normal") {
+                renderQueue.push(0);
+            }
+            else {
+                // ブレンドモードのみのLayerモード
+                const layerBounds = displayObjectContainerCalcBoundsMatrixUseCase(display_object_container, matrix);
+                const layerXMin = layerBounds[0];
+                const layerYMin = layerBounds[1];
+                renderQueue.push(1, Math.ceil(Math.abs(layerBounds[2] - layerXMin)), Math.ceil(Math.abs(layerBounds[3] - layerYMin)), 0, // not use filter,
+                tMatrix[0], tMatrix[1], tMatrix[2], tMatrix[3], layerXMin, layerYMin, tColorTransform[0], tColorTransform[1], tColorTransform[2], tColorTransform[3], tColorTransform[4], tColorTransform[5], tColorTransform[6], tColorTransform[7]);
+                const a0 = tMatrix[0];
+                const a1 = tMatrix[1];
+                const a2 = tMatrix[2];
+                const a3 = tMatrix[3];
+                const adjustedTx1 = tMatrix[4] - layerXMin;
+                const adjustedTy1 = tMatrix[5] - layerYMin;
+                if (tMatrix !== matrix) {
+                    Matrix.release(tMatrix);
+                }
+                tMatrix = $getFloat32Array6(a0, a1, a2, a3, adjustedTx1, adjustedTy1);
+                $poolBoundsArray(layerBounds);
+                if (tColorTransform !== color_transform) {
+                    ColorTransform.release(tColorTransform);
+                }
+                tColorTransform = $getFloat32Array8(1, 1, 1, 1, 0, 0, 0, 0);
+            }
+        }
+        $poolBoundsArray(bounds);
+    }
+    else {
+        if (blendMode === "normal") {
+            renderQueue.push(0);
+        }
+        else {
+            const layerBounds = displayObjectContainerCalcBoundsMatrixUseCase(display_object_container, matrix);
+            const layerXMin2 = layerBounds[0];
+            const layerYMin2 = layerBounds[1];
+            renderQueue.push(1, Math.ceil(Math.abs(layerBounds[2] - layerXMin2)), Math.ceil(Math.abs(layerBounds[3] - layerYMin2)), 0, // not use filter,
+            tMatrix[0], tMatrix[1], tMatrix[2], tMatrix[3], layerXMin2, layerYMin2, tColorTransform[0], tColorTransform[1], tColorTransform[2], tColorTransform[3], tColorTransform[4], tColorTransform[5], tColorTransform[6], tColorTransform[7]);
+            const b0 = tMatrix[0];
+            const b1 = tMatrix[1];
+            const b2 = tMatrix[2];
+            const b3 = tMatrix[3];
+            const adjustedTx2 = tMatrix[4] - layerXMin2;
+            const adjustedTy2 = tMatrix[5] - layerYMin2;
+            if (tMatrix !== matrix) {
+                Matrix.release(tMatrix);
+            }
+            tMatrix = $getFloat32Array6(b0, b1, b2, b3, adjustedTx2, adjustedTy2);
+            $poolBoundsArray(layerBounds);
+            if (tColorTransform !== color_transform) {
+                ColorTransform.release(tColorTransform);
+            }
+            tColorTransform = $getFloat32Array8(1, 1, 1, 1, 0, 0, 0, 0);
+        }
+    }
     // mask
     const maskDisplayObject = display_object_container.mask;
     if (maskDisplayObject) {
@@ -93,20 +231,25 @@ export const execute = (display_object_container, image_bitmaps, matrix, color_t
     else {
         renderQueue.push(0);
     }
+    // children
     renderQueue.push(children.length);
     let clipDepth = 0;
     let canRenderMask = true;
     for (let idx = 0; idx < children.length; ++idx) {
         const child = children[idx];
+        renderQueue.push(child.placeId, child.clipDepth);
+        // マスクオブジェクトは描画しない（hidden=0）
         if (child.isMask) {
+            renderQueue.push(0);
+            child.changed = false;
             continue;
         }
-        renderQueue.push(child.placeId, child.clipDepth);
         if (clipDepth && child.placeId > clipDepth) {
             clipDepth = 0;
             canRenderMask = true;
         }
         if (!canRenderMask) {
+            renderQueue.push(0);
             child.changed = false;
             continue;
         }

package/src/DisplayObjectContainer/usecase/DisplayObjectContainerGetLayerBoundsUseCase.d.ts

@@ -0,0 +1,14 @@
+import type { DisplayObjectContainer } from "../../DisplayObjectContainer";
+/**
+ * @description DisplayObjectContainerのレイヤー境界を取得します。
+ *              子孫のフィルター適用後のboundsを考慮した境界を返却します。
+ *              Get the layer bounds of DisplayObjectContainer.
+ *              Returns bounds considering filter-expanded bounds of descendants.
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @param  {Float32Array | null} matrix
+ * @return {Float32Array}
+ * @method
+ * @public
+ */
+export declare const execute: <P extends DisplayObjectContainer>(display_object_container: P, matrix?: Float32Array | null) => Float32Array;

package/src/DisplayObjectContainer/usecase/DisplayObjectContainerGetLayerBoundsUseCase.js

@@ -0,0 +1,65 @@
+import { Matrix } from "@next2d/geom";
+import { execute as displayObjectGetRawMatrixUseCase } from "../../DisplayObject/usecase/DisplayObjectGetRawMatrixUseCase";
+import { execute as shapeCalcLayerBoundsUseCase } from "../../Shape/usecase/ShapeCalcLayerBoundsUseCase";
+import { execute as videoCalcLayerBoundsUseCase } from "../../Video/usecase/VideoCalcLayerBoundsUseCase";
+import { execute as textFieldCalcLayerBoundsUseCase } from "../../TextField/usecase/TextFieldCalcLayerBoundsUseCase";
+import { $getBoundsArray, $poolBoundsArray } from "../../DisplayObjectUtil";
+/**
+ * @description DisplayObjectContainerのレイヤー境界を取得します。
+ *              子孫のフィルター適用後のboundsを考慮した境界を返却します。
+ *              Get the layer bounds of DisplayObjectContainer.
+ *              Returns bounds considering filter-expanded bounds of descendants.
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @param  {Float32Array | null} matrix
+ * @return {Float32Array}
+ * @method
+ * @public
+ */
+export const execute = (display_object_container, matrix = null) => {
+    const children = display_object_container.children;
+    if (!children.length) {
+        return $getBoundsArray(0, 0, 0, 0);
+    }
+    const rawMatrix = displayObjectGetRawMatrixUseCase(display_object_container);
+    const tMatrix = rawMatrix
+        ? matrix
+            ? Matrix.multiply(matrix, rawMatrix)
+            : rawMatrix
+        : matrix;
+    const no = Number.MAX_VALUE;
+    let xMin = no;
+    let xMax = -no;
+    let yMin = no;
+    let yMax = -no;
+    for (let idx = 0; idx < children.length; idx++) {
+        const child = children[idx];
+        if (!child || !child.visible) {
+            continue;
+        }
+        let bounds = null;
+        switch (true) {
+            case child.isContainerEnabled:
+                bounds = execute(child, tMatrix);
+                break;
+            case child.isShape:
+                bounds = shapeCalcLayerBoundsUseCase(child, tMatrix);
+                break;
+            case child.isText:
+                bounds = textFieldCalcLayerBoundsUseCase(child, tMatrix);
+                break;
+            case child.isVideo:
+                bounds = videoCalcLayerBoundsUseCase(child, tMatrix);
+                break;
+        }
+        if (!bounds) {
+            continue;
+        }
+        xMin = Math.min(xMin, bounds[0]);
+        yMin = Math.min(yMin, bounds[1]);
+        xMax = Math.max(xMax, bounds[2]);
+        yMax = Math.max(yMax, bounds[3]);
+        $poolBoundsArray(bounds);
+    }
+    return $getBoundsArray(xMin, yMin, xMax, yMax);
+};

package/src/Graphics/service/GraphicsToNumberArrayService.js

@@ -48,6 +48,10 @@ export const execute = (recodes) => {
                         case "square":
                             array.push(2);
                             break;
+                        default:
+                            // 無効な値の場合はデフォルトで"none"(0)を使用
+                            array.push(0);
+                            break;
                     }
                     const lineJoin = recodes[idx++];
                     switch (lineJoin) {
@@ -60,6 +64,10 @@ export const execute = (recodes) => {
                         case "round":
                             array.push(2);
                             break;
+                        default:
+                            // 無効な値の場合はデフォルトで"round"(2)を使用
+                            array.push(2);
+                            break;
                     }
                     array.push(recodes[idx++], // MITER LIMIT
                     recodes[idx++], recodes[idx++], recodes[idx++], recodes[idx++]);
@@ -114,6 +122,10 @@ export const execute = (recodes) => {
                         case "square":
                             array.push(2);
                             break;
+                        default:
+                            // 無効な値の場合はデフォルトで"none"(0)を使用
+                            array.push(0);
+                            break;
                     }
                     const lineJoin = recodes[idx++];
                     switch (lineJoin) {
@@ -126,6 +138,10 @@ export const execute = (recodes) => {
                         case "round":
                             array.push(2);
                             break;
+                        default:
+                            // 無効な値の場合はデフォルトで"round"(2)を使用
+                            array.push(2);
+                            break;
                     }
                     // miterLimit
                     array.push(recodes[idx++]);
@@ -196,6 +212,10 @@ export const execute = (recodes) => {
                         case "square":
                             array.push(2);
                             break;
+                        default:
+                            // 無効な値の場合はデフォルトで"none"(0)を使用
+                            array.push(0);
+                            break;
                     }
                     const lineJoin = recodes[idx++];
                     switch (lineJoin) {
@@ -208,6 +228,10 @@ export const execute = (recodes) => {
                         case "round":
                             array.push(2);
                             break;
+                        default:
+                            // 無効な値の場合はデフォルトで"round"(2)を使用
+                            array.push(2);
+                            break;
                     }
                     // MITER LIMIT
                     array.push(recodes[idx++]);
@@ -223,7 +247,7 @@ export const execute = (recodes) => {
                     }
                     const matrix = recodes[idx++];
                     if (matrix) {
-                        array.push(...matrix);
+                        array.push(...matrix.rawData);
                     }
                     else {
                         array.push(1, 0, 0, 1, 0, 0);

package/src/Shape/usecase/ShapeCalcLayerBoundsUseCase.d.ts

@@ -0,0 +1,12 @@
+import type { Shape } from "../../Shape";
+/**
+ * @description Shapeのフィルター適用後の描画範囲を計算します。
+ *              Calculate the drawing area of Shape after applying filters.
+ *
+ * @param  {Shape} shape
+ * @param  {Float32Array | null} [matrix=null]
+ * @return {Float32Array}
+ * @method
+ * @protected
+ */
+export declare const execute: (shape: Shape, matrix?: Float32Array | null) => Float32Array;

package/src/Shape/usecase/ShapeCalcLayerBoundsUseCase.js

@@ -0,0 +1,32 @@
+import { execute as shapeCalcBoundsMatrixUseCase } from "./ShapeCalcBoundsMatrixUseCase";
+import { $getBoundsArray, $poolBoundsArray } from "../../DisplayObjectUtil";
+/**
+ * @description Shapeのフィルター適用後の描画範囲を計算します。
+ *              Calculate the drawing area of Shape after applying filters.
+ *
+ * @param  {Shape} shape
+ * @param  {Float32Array | null} [matrix=null]
+ * @return {Float32Array}
+ * @method
+ * @protected
+ */
+export const execute = (shape, matrix = null) => {
+    const bounds = shapeCalcBoundsMatrixUseCase(shape, matrix);
+    const filters = shape.filters;
+    if (filters) {
+        const filterBounds = $getBoundsArray(0, 0, 0, 0);
+        for (let idx = 0; idx < filters.length; idx++) {
+            const filter = filters[idx];
+            if (!filter || !filter.canApplyFilter()) {
+                continue;
+            }
+            filter.getBounds(filterBounds);
+        }
+        bounds[0] += filterBounds[0];
+        bounds[1] += filterBounds[1];
+        bounds[2] += filterBounds[2];
+        bounds[3] += filterBounds[3];
+        $poolBoundsArray(filterBounds);
+    }
+    return bounds;
+};

package/src/Shape/usecase/ShapeGenerateRenderQueueUseCase.js

@@ -35,6 +35,10 @@ export const execute = (shape, matrix, color_transform, renderer_width, renderer
     // transformed ColorTransform(tColorTransform)
     const rawColor = displayObjectGetRawColorTransformUseCase(shape);
     const tColorTransform = rawColor
+        && (rawColor[0] !== 1 || rawColor[1] !== 1
+            || rawColor[2] !== 1 || rawColor[3] !== 1
+            || rawColor[4] !== 0 || rawColor[5] !== 0
+            || rawColor[6] !== 0 || rawColor[7] !== 0)
         ? ColorTransform.multiply(color_transform, rawColor)
         : color_transform;
     const alpha = $clamp(tColorTransform[3] + tColorTransform[7] / 255, 0, 1, 0);
@@ -48,6 +52,9 @@ export const execute = (shape, matrix, color_transform, renderer_width, renderer
     // transformed matrix(tMatrix)
     const rawMatrix = displayObjectGetRawMatrixUseCase(shape);
     const tMatrix = rawMatrix
+        && (rawMatrix[0] !== 1 || rawMatrix[1] !== 0
+            || rawMatrix[2] !== 0 || rawMatrix[3] !== 1
+            || rawMatrix[4] !== 0 || rawMatrix[5] !== 0)
         ? Matrix.multiply(matrix, rawMatrix)
         : matrix;
     const bounds = displayObjectCalcBoundsMatrixService(graphics.xMin, graphics.yMin, graphics.xMax, graphics.yMax, tMatrix);
@@ -71,7 +78,6 @@ export const execute = (shape, matrix, color_transform, renderer_width, renderer
             if (tMatrix !== matrix) {
                 Matrix.release(tMatrix);
             }
-            $poolBoundsArray(bounds);
             renderQueue.push(0);
             return;
         default:
@@ -87,7 +93,6 @@ export const execute = (shape, matrix, color_transform, renderer_width, renderer
         if (tMatrix !== matrix) {
             Matrix.release(tMatrix);
         }
-        $poolBoundsArray(bounds);
         renderQueue.push(0);
         return;
     }
@@ -102,29 +107,32 @@ export const execute = (shape, matrix, color_transform, renderer_width, renderer
         }
         else {
             shape.uniqueKey = shape.isBitmap
-                ? `${shape.instanceId}`
+                ? `${displayObjectGenerateHashService(new Float32Array(shape.$bitmapBuffer.buffer))}`
                 : `${displayObjectGenerateHashService(graphics.buffer)}`;
         }
     }
-    const xScale = Math.round(Math.sqrt(tMatrix[0] * tMatrix[0]
-        + tMatrix[1] * tMatrix[1]) * 100) / 100;
-    const yScale = Math.round(Math.sqrt(tMatrix[2] * tMatrix[2]
-        + tMatrix[3] * tMatrix[3]) * 100) / 100;
+    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 xScaleRounded = Math.round(xScale * 100) / 100;
+    const yScaleRounded = Math.round(yScale * 100) / 100;
     if (!shape.isBitmap
         && !shape.cacheKey
-        || shape.cacheParams[0] !== xScale
-        || shape.cacheParams[1] !== yScale
+        || shape.cacheParams[0] !== xScaleRounded
+        || shape.cacheParams[1] !== yScaleRounded
         || shape.cacheParams[2] !== tColorTransform[7]) {
-        shape.cacheKey = $cacheStore.generateKeys(xScale, yScale, tColorTransform[7]);
-        shape.cacheParams[0] = xScale;
-        shape.cacheParams[1] = yScale;
+        shape.cacheKey = $cacheStore.generateKeys(xScaleRounded, yScaleRounded, tColorTransform[7]);
+        shape.cacheParams[0] = xScaleRounded;
+        shape.cacheParams[1] = yScaleRounded;
         shape.cacheParams[2] = tColorTransform[7];
     }
     const cacheKey = shape.isBitmap
         ? 0
         : shape.cacheKey;
     // rennder on
-    renderQueue.push(1, $RENDERER_SHAPE_TYPE, tMatrix[0], tMatrix[1], tMatrix[2], tMatrix[3], tMatrix[4], tMatrix[5], tColorTransform[0], tColorTransform[1], tColorTransform[2], tColorTransform[3], tColorTransform[4], tColorTransform[5], tColorTransform[6], tColorTransform[7], xMin, yMin, xMax, yMax, graphics.xMin, graphics.yMin, graphics.xMax, graphics.yMax, +isGridEnabled, +isDrawable, +shape.isBitmap, +shape.uniqueKey, cacheKey);
+    renderQueue.pushShapeBuffer(1, $RENDERER_SHAPE_TYPE, tMatrix[0], tMatrix[1], tMatrix[2], tMatrix[3], tMatrix[4], tMatrix[5], tColorTransform[0], tColorTransform[1], tColorTransform[2], tColorTransform[3], tColorTransform[4], tColorTransform[5], tColorTransform[6], tColorTransform[7], xMin, yMin, xMax, yMax, graphics.xMin, graphics.yMin, graphics.xMax, graphics.yMax, +isGridEnabled, +isDrawable, +shape.isBitmap, +shape.uniqueKey, cacheKey, xScale, yScale, shape.instanceId // フィルターキャッシュ用のユニークキー
+    );
     if (shape.$cache && !shape.$cache.has(shape.uniqueKey)) {
         shape.$cache = null;
     }
@@ -200,12 +208,13 @@ export const execute = (shape, matrix, color_transform, renderer_width, renderer
         renderQueue.push(1);
     }
     renderQueue.push(displayObjectBlendToNumberService(shape.blendMode));
-    if (shape.filters?.length) {
+    const filters = shape.filters;
+    if (filters) {
         let updated = false;
         const params = [];
         const bounds = $getBoundsArray(0, 0, 0, 0);
-        for (let idx = 0; idx < shape.filters.length; idx++) {
-            const filter = shape.filters[idx];
+        for (let idx = 0; idx < filters.length; idx++) {
+            const filter = filters[idx];
             if (!filter || !filter.canApplyFilter()) {
                 continue;
             }
@@ -225,6 +234,9 @@ export const execute = (shape, matrix, color_transform, renderer_width, renderer
             renderQueue.push(+useFilfer, +updated, bounds[0], bounds[1], bounds[2], bounds[3], params.length);
             renderQueue.set(new Float32Array(params));
         }
+        else {
+            renderQueue.push(0);
+        }
         $poolBoundsArray(bounds);
     }
     else {

package/src/Shape/usecase/ShapeLoadAsyncUseCase.d.ts

@@ -0,0 +1,12 @@
+import type { Shape } from "../../Shape";
+/**
+ * @description 形状読み込みユースケース
+ *              Shape Load Use Case
+ *
+ * @param  {Shape} shape
+ * @param  {string} url
+ * @return {Promise<void>}
+ * @method
+ * @public
+ */
+export declare const execute: (shape: Shape, url: string) => Promise<void>;

package/src/Shape/usecase/ShapeLoadAsyncUseCase.js

@@ -0,0 +1,21 @@
+import { Event } from "@next2d/events";
+/**
+ * @description 形状読み込みユースケース
+ *              Shape Load Use Case
+ *
+ * @param  {Shape} shape
+ * @param  {string} url
+ * @return {Promise<void>}
+ * @method
+ * @public
+ */
+export const execute = (shape, url) => {
+    return new Promise((resolve) => {
+        const onComplete = () => {
+            shape.removeEventListener(Event.COMPLETE, onComplete);
+            resolve();
+        };
+        shape.addEventListener(Event.COMPLETE, onComplete);
+        shape.src = url;
+    });
+};

package/src/Shape.d.ts

@@ -110,6 +110,16 @@ export declare class Shape extends DisplayObject {
      */
     get src(): string;
     set src(src: string);
+    /**
+     * @description 指定されたURLから画像を非同期で読み込み、Graphicsを生成します
+     *              Asynchronously loads images from the specified URL and generates Graphics.
+     *
+     * @param  {string} url
+     * @return {Promise<void>}
+     * @method
+     * @public
+     */
+    load(url: string): Promise<void>;
     /**
      * @description ビットマップデータを返します
      *              Returns the bitmap data.

package/src/Shape.js

@@ -5,6 +5,7 @@ import { execute as shapeClearBitmapBufferService } from "./Shape/usecase/ShapeC
 import { execute as shapeSetBitmapBufferUseCase } from "./Shape/usecase/ShapeSetBitmapBufferUseCase";
 import { execute as shapeLoadSrcUseCase } from "./Shape/usecase/ShapeLoadSrcUseCase";
 import { execute as shapeBuildFromCharacterUseCase } from "./Shape/usecase/ShapeBuildFromCharacterUseCase";
+import { execute as shapeLoadAsyncUseCase } from "./Shape/usecase/ShapeLoadAsyncUseCase";
 import { $graphicMap, $getArray } from "./DisplayObjectUtil";
 /**
  * @description Shape クラスは、ベクターグラフィックスを表示するための表示オブジェクトです。
@@ -177,6 +178,18 @@ export class Shape extends DisplayObject {
         this._$src = src;
         shapeLoadSrcUseCase(this, src);
     }
+    /**
+     * @description 指定されたURLから画像を非同期で読み込み、Graphicsを生成します
+     *              Asynchronously loads images from the specified URL and generates Graphics.
+     *
+     * @param  {string} url
+     * @return {Promise<void>}
+     * @method
+     * @public
+     */
+    load(url) {
+        return shapeLoadAsyncUseCase(this, url);
+    }
     /**
      * @description ビットマップデータを返します
      *              Returns the bitmap data.

package/src/Sprite.d.ts

@@ -3,11 +3,8 @@ import type { Rectangle } from "@next2d/geom";
 import type { SoundTransform } from "@next2d/media";
 import { DisplayObjectContainer } from "./DisplayObjectContainer";
 /**
- * @description Sprite クラスは、表示リストの基本的要素です。
- *              グラフィックを表示でき、子を持つこともできる表示リストノードです。
- *
- *              The Sprite class is a basic display list building block:
- *              a display list node that can display graphics and can also contain children.
+ * @description Sprite クラスは、表示リストの基本的要素です。子を持つこともできる表示リストノードです。
+ *              The Sprite class is the basic display list building block: a display list node that can
  *
  * @class
  * @memberOf next2d.display

package/src/Sprite.js

@@ -2,11 +2,8 @@ import { DisplayObjectContainer } from "./DisplayObjectContainer";
 import { execute as spriteStartDragService } from "./Sprite/service/SpriteStartDragService";
 import { execute as spriteStopDragService } from "./Sprite/service/SpriteStopDragService";
 /**
- * @description Sprite クラスは、表示リストの基本的要素です。
- *              グラフィックを表示でき、子を持つこともできる表示リストノードです。
- *
- *              The Sprite class is a basic display list building block:
- *              a display list node that can display graphics and can also contain children.
+ * @description Sprite クラスは、表示リストの基本的要素です。子を持つこともできる表示リストノードです。
+ *              The Sprite class is the basic display list building block: a display list node that can
  *
  * @class
  * @memberOf next2d.display

package/src/Stage.js

@@ -190,8 +190,11 @@ export class Stage extends DisplayObjectContainer {
      */
     addChild(display_object) {
         $stageAssignedMap.add(display_object.instanceId);
+        // fixed logic
+        $rootMap.set(this, display_object);
         super.addChild(display_object);
         // fixed logic for root map
+        $rootMap.delete(this);
         $rootMap.set(display_object, display_object);
         return display_object;
     }

package/src/TextField/usecase/TextFieldCalcLayerBoundsUseCase.d.ts

@@ -0,0 +1,12 @@
+import type { TextField } from "@next2d/text";
+/**
+ * @description TextFieldのフィルター適用後の描画範囲を計算します。
+ *              Calculate the drawing area of TextField after applying filters.
+ *
+ * @param  {TextField} text_field
+ * @param  {Float32Array | null} [matrix=null]
+ * @return {Float32Array}
+ * @method
+ * @protected
+ */
+export declare const execute: (text_field: TextField, matrix?: Float32Array | null) => Float32Array;