@next2d/display 1.18.12 → 2.0.0

package/src/DisplayObjectContainer/usecase/DisplayObjectContainerGenerateRenderQueueUseCase.js

@@ -0,0 +1,163 @@
+import { execute as displayObjectGetRawColorTransformUseCase } from "../../DisplayObject/usecase/DisplayObjectGetRawColorTransformUseCase";
+import { execute as displayObjectGetRawMatrixUseCase } from "../../DisplayObject/usecase/DisplayObjectGetRawMatrixUseCase";
+import { execute as shapeGenerateRenderQueueUseCase } from "../../Shape/usecase/ShapeGenerateRenderQueueUseCase";
+import { execute as shapeGenerateClipQueueUseCase } from "../../Shape/usecase/ShapeGenerateClipQueueUseCase";
+import { execute as textFieldGenerateRenderQueueUseCase } from "../../TextField/usecase/TextFieldGenerateRenderQueueUseCase";
+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 { renderQueue } from "@next2d/render-queue";
+import { $clamp, $RENDERER_CONTAINER_TYPE } from "../../DisplayObjectUtil";
+import { ColorTransform, Matrix } from "@next2d/geom";
+/**
+ * @description renderer workerに渡すコンテナの描画データを生成
+ *              Generate rendering data of the container to be passed to the renderer worker
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @param  {ImageBitmap[]} image_bitmaps
+ * @param  {Float32Array} matrix
+ * @param  {Float32Array} color_transform
+ * @param  {number} renderer_width
+ * @param  {number} renderer_height
+ * @param  {number} point_x
+ * @param  {number} point_y
+ * @return {void}
+ * @method
+ * @private
+ */
+export const execute = (display_object_container, image_bitmaps, matrix, color_transform, renderer_width, renderer_height, point_x, point_y) => {
+    if (!display_object_container.visible) {
+        renderQueue.push(0);
+        return;
+    }
+    // transformed ColorTransform(tColorTransform)
+    const rawColor = displayObjectGetRawColorTransformUseCase(display_object_container);
+    const tColorTransform = rawColor
+        ? ColorTransform.multiply(color_transform, rawColor)
+        : color_transform;
+    const alpha = $clamp(tColorTransform[3] + tColorTransform[7] / 255, 0, 1, 0);
+    if (!alpha) {
+        if (tColorTransform !== color_transform) {
+            ColorTransform.release(tColorTransform);
+        }
+        renderQueue.push(0);
+        return;
+    }
+    const children = display_object_container.children;
+    if (!children.length) {
+        if (tColorTransform !== color_transform) {
+            ColorTransform.release(tColorTransform);
+        }
+        renderQueue.push(0);
+        return;
+    }
+    // transformed matrix(tMatrix)
+    const rawMatrix = displayObjectGetRawMatrixUseCase(display_object_container);
+    const tMatrix = rawMatrix
+        ? Matrix.multiply(matrix, rawMatrix)
+        : matrix;
+    // size zero
+    if (!tMatrix[0] && !tMatrix[1]
+        || !tMatrix[2] && !tMatrix[3]) {
+        if (tColorTransform !== color_transform) {
+            ColorTransform.release(tColorTransform);
+        }
+        if (tMatrix !== matrix) {
+            Matrix.release(tMatrix);
+        }
+        renderQueue.push(0);
+        return;
+    }
+    renderQueue.push(1, $RENDERER_CONTAINER_TYPE);
+    // mask
+    const maskDisplayObject = display_object_container.mask;
+    if (maskDisplayObject) {
+        const bounds = displayObjectIsMaskReflectedInDisplayUseCase(maskDisplayObject, tMatrix, renderer_width, renderer_height, point_x, point_y);
+        if (!bounds) {
+            renderQueue.push(0);
+        }
+        else {
+            // マスクの描画範囲
+            renderQueue.push(1, bounds[0], bounds[1], bounds[2], bounds[3]);
+            switch (true) {
+                case maskDisplayObject.isContainerEnabled: // 0x00
+                    displayObjectContainerGenerateClipQueueUseCase(maskDisplayObject, tMatrix);
+                    break;
+                case maskDisplayObject.isShape: // 0x01
+                    shapeGenerateClipQueueUseCase(maskDisplayObject, tMatrix);
+                    break;
+                default:
+                    break;
+            }
+        }
+        maskDisplayObject.changed = false;
+    }
+    else {
+        renderQueue.push(0);
+    }
+    renderQueue.push(children.length);
+    let clipDepth = 0;
+    let canRenderMask = true;
+    for (let idx = 0; idx < children.length; ++idx) {
+        const child = children[idx];
+        if (child.isMask) {
+            continue;
+        }
+        renderQueue.push(child.placeId, child.clipDepth);
+        if (clipDepth && child.placeId > clipDepth) {
+            clipDepth = 0;
+            canRenderMask = true;
+        }
+        if (!canRenderMask) {
+            child.changed = false;
+            continue;
+        }
+        if (child.clipDepth) {
+            clipDepth = child.clipDepth;
+            // マスクの描画開始判定
+            const bounds = displayObjectIsMaskReflectedInDisplayUseCase(child, tMatrix, renderer_width, renderer_height, point_x, point_y);
+            canRenderMask = bounds ? true : false;
+            renderQueue.push(+canRenderMask);
+            if (!bounds) {
+                child.changed = false;
+                continue;
+            }
+            renderQueue.push(bounds[0], bounds[1], bounds[2], bounds[3]);
+            switch (true) {
+                case child.isContainerEnabled: // 0x00
+                    displayObjectContainerGenerateClipQueueUseCase(child, tMatrix);
+                    break;
+                case child.isShape: // 0x01
+                    shapeGenerateClipQueueUseCase(child, tMatrix);
+                    break;
+                default:
+                    break;
+            }
+            child.changed = false;
+            continue;
+        }
+        switch (true) {
+            case child.isContainerEnabled: // 0x00
+                execute(child, image_bitmaps, tMatrix, tColorTransform, renderer_width, renderer_height, point_x, point_y);
+                break;
+            case child.isShape: // 0x01
+                shapeGenerateRenderQueueUseCase(child, tMatrix, tColorTransform, renderer_width, renderer_height, point_x, point_y);
+                break;
+            case child.isText: // 0x02
+                textFieldGenerateRenderQueueUseCase(child, tMatrix, tColorTransform, renderer_width, renderer_height, point_x, point_y);
+                break;
+            case child.isVideo: // 0x03
+                videoGenerateRenderQueueUseCase(child, image_bitmaps, tMatrix, tColorTransform, renderer_width, renderer_height, point_x, point_y);
+                break;
+            default:
+                break;
+        }
+        child.changed = false;
+    }
+    if (tColorTransform !== color_transform) {
+        ColorTransform.release(tColorTransform);
+    }
+    if (tMatrix !== matrix) {
+        Matrix.release(tMatrix);
+    }
+};

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

@@ -0,0 +1,17 @@
+import type { IPlayerHitObject } from "../../interface/IPlayerHitObject";
+import type { DisplayObjectContainer } from "../../DisplayObjectContainer";
+import type { DisplayObject } from "../../DisplayObject";
+/**
+ * @description コンテナ内のヒット判定
+ *              Hit judgment in the container
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @param  {CanvasRenderingContext2D} hit_context
+ * @param  {Float32Array} matrix
+ * @param  {IPlayerHitObject} hit_object
+ * @param  {boolean} [mouse_children=true]
+ * @return {boolean}
+ * @method
+ * @protected
+ */
+export declare const execute: <P extends DisplayObjectContainer, D extends DisplayObject>(display_object_container: P, hit_context: CanvasRenderingContext2D, matrix: Float32Array, hit_object: IPlayerHitObject, mouse_children?: boolean) => boolean;

package/src/DisplayObjectContainer/usecase/DisplayObjectContainerMouseHitUseCase.js

@@ -0,0 +1,206 @@
+import { Matrix } from "@next2d/geom";
+import { execute as displayObjectGetRawMatrixUseCase } from "../../DisplayObject/usecase/DisplayObjectGetRawMatrixUseCase";
+import { execute as shapeHitTestUseCase } from "../../Shape/usecase/ShapeHitTestUseCase";
+import { execute as textFieldHitTestUseCase } from "../../TextField/usecase/TextFieldHitTestUseCase";
+import { execute as videoHitTestUseCase } from "../../Video/usecase/VideoHitTestUseCase";
+import { $getArray, $poolArray, $getMap, $poolMap } from "../../DisplayObjectUtil";
+/**
+ * @description コンテナ内のヒット判定
+ *              Hit judgment in the container
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @param  {CanvasRenderingContext2D} hit_context
+ * @param  {Float32Array} matrix
+ * @param  {IPlayerHitObject} hit_object
+ * @param  {boolean} [mouse_children=true]
+ * @return {boolean}
+ * @method
+ * @protected
+ */
+export const execute = (display_object_container, hit_context, matrix, hit_object, mouse_children = true) => {
+    const children = display_object_container.children;
+    if (!children.length) {
+        return false;
+    }
+    const rawMatrix = displayObjectGetRawMatrixUseCase(display_object_container);
+    const tMatrix = rawMatrix
+        ? Matrix.multiply(matrix, rawMatrix)
+        : matrix;
+    // mask set
+    const clips = $getArray();
+    const targets = $getArray();
+    const clipIndexes = $getMap();
+    let clipDepth = 0;
+    let clipIdx = 0;
+    for (let idx = 0; idx < children.length; ++idx) {
+        const instance = children[idx];
+        if (!instance) {
+            continue;
+        }
+        if (instance.isMask) {
+            continue;
+        }
+        if (instance.clipDepth) {
+            clipIdx = clips.length;
+            clipDepth = instance.clipDepth;
+            clips.push(instance);
+            continue;
+        }
+        // fixed logic
+        if (!instance.visible) {
+            continue;
+        }
+        // clip end
+        if (clipDepth && instance.placeId > clipDepth) {
+            clipIdx = 0;
+            clipDepth = 0;
+        }
+        // clip check on
+        if (clipIdx) {
+            clipIndexes.set(instance.instanceId, clipIdx);
+        }
+        targets.push(instance);
+    }
+    const mouseChildren = display_object_container.mouseChildren && mouse_children;
+    // fixed logic
+    if (display_object_container.isSprite
+        && display_object_container.hitArea) {
+        const hitTest = execute(display_object_container.hitArea, hit_context, tMatrix, hit_object, mouseChildren);
+        if (hitTest
+            && mouseChildren
+            && display_object_container.mouseEnabled) {
+            if (display_object_container.buttonMode
+                && display_object_container.useHandCursor) {
+                hit_object.pointer = "pointer";
+            }
+            if (!hit_object.hit) {
+                hit_object.hit = display_object_container;
+            }
+        }
+        return hitTest;
+    }
+    let hit = false;
+    const maskDisplayObject = display_object_container.mask;
+    if (maskDisplayObject) {
+        let hitTest = false;
+        switch (true) {
+            case maskDisplayObject.isContainerEnabled:
+                hitTest = execute(maskDisplayObject, hit_context, tMatrix, hit_object, mouseChildren);
+                break;
+            case maskDisplayObject.isShape:
+                hitTest = shapeHitTestUseCase(maskDisplayObject, hit_context, tMatrix, hit_object);
+                break;
+            case maskDisplayObject.isText:
+                hitTest = textFieldHitTestUseCase(maskDisplayObject, hit_context, tMatrix, hit_object);
+                break;
+            case maskDisplayObject.isVideo:
+                hitTest = videoHitTestUseCase(maskDisplayObject, hit_context, tMatrix, hit_object);
+                break;
+            default:
+                break;
+        }
+        if (!hitTest) {
+            return false;
+        }
+    }
+    while (targets.length) {
+        const instance = targets.pop();
+        if (!instance) {
+            continue;
+        }
+        if (instance.isMask) {
+            continue;
+        }
+        // mask target
+        if (clipIndexes.has(instance.instanceId)) {
+            const index = clipIndexes.get(instance.instanceId);
+            if (!index) {
+                continue;
+            }
+            const clip = clips[index];
+            if (!clip) {
+                continue;
+            }
+            let hitTest = false;
+            switch (true) {
+                case clip.isContainerEnabled:
+                    hitTest = execute(clip, hit_context, tMatrix, hit_object, mouseChildren);
+                    break;
+                case clip.isShape:
+                    hitTest = shapeHitTestUseCase(clip, hit_context, tMatrix, hit_object);
+                    break;
+                case clip.isText:
+                    hitTest = textFieldHitTestUseCase(clip, hit_context, tMatrix, hit_object);
+                    break;
+                case clip.isVideo:
+                    hitTest = videoHitTestUseCase(clip, hit_context, tMatrix, hit_object);
+                    break;
+                default:
+                    break;
+            }
+            if (!hitTest) {
+                continue;
+            }
+        }
+        let hitTest = false;
+        switch (true) {
+            case instance.isContainerEnabled:
+                hitTest = execute(instance, hit_context, tMatrix, hit_object, mouseChildren);
+                break;
+            case instance.isShape:
+                hitTest = shapeHitTestUseCase(instance, hit_context, tMatrix, hit_object);
+                break;
+            case instance.isText:
+                hitTest = textFieldHitTestUseCase(instance, hit_context, tMatrix, hit_object);
+                break;
+            case instance.isVideo:
+                hitTest = videoHitTestUseCase(instance, hit_context, tMatrix, hit_object);
+                break;
+            default:
+                break;
+        }
+        if (!hitTest) {
+            continue;
+        }
+        hit = true;
+        if (!mouseChildren) {
+            break;
+        }
+        if (!instance.isInteractive) {
+            continue;
+        }
+        if (!instance.mouseEnabled) {
+            continue;
+        }
+        if (hit_object.pointer === "auto") {
+            switch (true) {
+                case instance.isText:
+                    if (instance.type === "input") {
+                        hit_object.pointer = "text";
+                    }
+                    break;
+                case instance.isSprite:
+                    if (instance.buttonMode
+                        && instance.useHandCursor) {
+                        hit_object.pointer = "pointer";
+                    }
+                    break;
+                default:
+                    hit_object.pointer = "pointer";
+                    break;
+            }
+        }
+        if (!hit_object.hit) {
+            hit_object.hit = instance;
+        }
+        break;
+    }
+    // pool
+    $poolArray(clips);
+    $poolArray(targets);
+    $poolMap(clipIndexes);
+    if (tMatrix !== matrix) {
+        Matrix.release(tMatrix);
+    }
+    return hit;
+};

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

@@ -0,0 +1,11 @@
+import type { DisplayObjectContainer } from "../../DisplayObjectContainer";
+/**
+ * @description 子孫のサウンド・アクションを準備する
+ *              Prepare sound and action of descendants
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: <C extends DisplayObjectContainer>(display_object_container: C) => void;

package/src/DisplayObjectContainer/usecase/DisplayObjectContainerPrepareUseCase.js

@@ -0,0 +1,32 @@
+import { execute as movieClipPrepareActionUseCase } from "../../MovieClip/usecase/MovieClipPrepareActionUseCase";
+import { execute as movieClipPrepareSoundUseCase } from "../../MovieClip/usecase/MovieClipPrepareSoundUseCase";
+/**
+ * @description 子孫のサウンド・アクションを準備する
+ *              Prepare sound and action of descendants
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (display_object_container) => {
+    const children = display_object_container.children;
+    for (let idx = children.length - 1; idx > -1; --idx) {
+        const displayObject = children[idx];
+        if (!displayObject) {
+            continue;
+        }
+        if (!displayObject.isContainerEnabled) {
+            continue;
+        }
+        execute(displayObject);
+        // タイムラインが有効な場合
+        if (!displayObject.isTimelineEnabled) {
+            continue;
+        }
+        // サウンドを登録
+        movieClipPrepareSoundUseCase(displayObject);
+        // アクションを登録
+        movieClipPrepareActionUseCase(displayObject);
+    }
+};

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

@@ -0,0 +1,12 @@
+import type { DisplayObjectContainer } from "../../DisplayObjectContainer";
+/**
+ * @description DisplayObjectContainerのmatrixを含まないバウンディングボックスを返却
+ *              Returns a bounding box that does not include the matrix of the DisplayObjectContainer
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @param  {Float32Array} [matrix=null]
+ * @return {Float32Array}
+ * @method
+ * @protected
+ */
+export declare const execute: <C extends DisplayObjectContainer>(display_object_container: C, matrix?: Float32Array | null) => Float32Array;

package/src/DisplayObjectContainer/usecase/DisplayObjectContainerRawBoundsMatrixUseCase.js

@@ -0,0 +1,62 @@
+import { Matrix } from "@next2d/geom";
+import { execute as shapeCalcBoundsMatrixUseCase } from "../../Shape/usecase/ShapeCalcBoundsMatrixUseCase";
+import { execute as videoCalcBoundsMatrixUseCase } from "../../Video/usecase/VideoCalcBoundsMatrixUseCase";
+import { execute as textFieldCalcBoundsMatrixUseCase } from "../../TextField/usecase/TextFieldCalcBoundsMatrixUseCase";
+import { execute as displayObjectGetRawMatrixUseCase } from "../../DisplayObject/usecase/DisplayObjectGetRawMatrixUseCase";
+import { $getBoundsArray, $poolBoundsArray } from "../../DisplayObjectUtil";
+/**
+ * @description DisplayObjectContainerのmatrixを含まないバウンディングボックスを返却
+ *              Returns a bounding box that does not include the matrix of the DisplayObjectContainer
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @param  {Float32Array} [matrix=null]
+ * @return {Float32Array}
+ * @method
+ * @protected
+ */
+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);
+    let tMatrix = matrix;
+    if (rawMatrix) {
+        tMatrix = matrix ? Matrix.multiply(matrix, rawMatrix) : rawMatrix;
+    }
+    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.visible) {
+            continue;
+        }
+        let bounds = null;
+        switch (true) {
+            case child.isContainerEnabled:
+                bounds = execute(child, tMatrix);
+                break;
+            case child.isShape:
+                bounds = shapeCalcBoundsMatrixUseCase(child, tMatrix);
+                break;
+            case child.isText:
+                bounds = textFieldCalcBoundsMatrixUseCase(child, tMatrix);
+                break;
+            case child.isVideo:
+                bounds = videoCalcBoundsMatrixUseCase(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/DisplayObjectContainer/usecase/DisplayObjectContainerRemoveChildAtUseCase.d.ts

@@ -0,0 +1,12 @@
+import type { DisplayObjectContainer } from "../../DisplayObjectContainer";
+/**
+ * @description 指定されたインデックスから子を削除する。
+ *              Remove a child from the specified index.
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @param  {number} index
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: <C extends DisplayObjectContainer>(display_object_container: C, index: number) => void;

package/src/DisplayObjectContainer/usecase/DisplayObjectContainerRemoveChildAtUseCase.js

@@ -0,0 +1,19 @@
+import { execute as displayObjectContainerGetChildAtService } from "../service/DisplayObjectContainerGetChildAtService";
+import { execute as displayObjectContainerRemoveChildUseCase } from "./DisplayObjectContainerRemoveChildUseCase";
+/**
+ * @description 指定されたインデックスから子を削除する。
+ *              Remove a child from the specified index.
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @param  {number} index
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (display_object_container, index) => {
+    const displayObject = displayObjectContainerGetChildAtService(display_object_container, index);
+    if (!displayObject) {
+        return;
+    }
+    displayObjectContainerRemoveChildUseCase(display_object_container, displayObject);
+};

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

@@ -0,0 +1,13 @@
+import type { DisplayObject } from "../../DisplayObject";
+import type { DisplayObjectContainer } from "../../DisplayObjectContainer";
+/**
+ * @description 指定の DisplayObject を DisplayObjectContainer から削除します。
+ *              Deletes the specified DisplayObject from the DisplayObjectContainer.
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @param  {DisplayObject} display_object
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: <P extends DisplayObjectContainer, D extends DisplayObject>(display_object_container: P, display_object: D) => void;

package/src/DisplayObjectContainer/usecase/DisplayObjectContainerRemoveChildUseCase.js

@@ -0,0 +1,66 @@
+import { execute as displayObjectApplyChangesService } from "../../DisplayObject/service/DisplayObjectApplyChangesService";
+import { execute as displayObjectContainerUnAssignStageAndRootService } from "../service/DisplayObjectContainerUnAssignStageAndRootService";
+import { execute as displayObjectDispatchRemovedEventService } from "../../DisplayObject/service/DisplayObjectDispatchRemovedEventService";
+import { execute as displayObjectDispatchRemovedToStageEventService } from "../../DisplayObject/service/DisplayObjectDispatchRemovedToStageEventService";
+import { execute as displayObjectContainerRemovedToStageService } from "../service/DisplayObjectContainerRemovedToStageService";
+import { Event, KeyboardEvent } from "@next2d/events";
+import { $rootMap, $stageAssignedMap } from "../../DisplayObjectUtil";
+/**
+ * @description 指定の DisplayObject を DisplayObjectContainer から削除します。
+ *              Deletes the specified DisplayObject from the DisplayObjectContainer.
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @param  {DisplayObject} display_object
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (display_object_container, display_object) => {
+    const parent = display_object.parent;
+    if (parent
+        && parent.instanceId !== display_object_container.instanceId) {
+        return;
+    }
+    const children = display_object_container.children;
+    const depth = children.indexOf(display_object);
+    if (depth > -1) {
+        children.splice(depth, 1);
+    }
+    // cache clear
+    display_object_container.$container = null;
+    // remove all broadcast events
+    if (display_object.hasEventListener(Event.ENTER_FRAME)) {
+        display_object.removeAllEventListener(Event.ENTER_FRAME);
+    }
+    if (display_object.hasEventListener(KeyboardEvent.KEY_DOWN)) {
+        display_object.removeAllEventListener(KeyboardEvent.KEY_DOWN);
+    }
+    if (display_object.hasEventListener(KeyboardEvent.KEY_UP)) {
+        display_object.removeAllEventListener(KeyboardEvent.KEY_UP);
+    }
+    // dispatch removed event
+    displayObjectDispatchRemovedEventService(display_object);
+    // ステージに登録されている場合はステージからの削除イベントを実行
+    if ($stageAssignedMap.has(display_object_container.instanceId)) {
+        displayObjectDispatchRemovedToStageEventService(display_object);
+        if (display_object.isContainerEnabled) {
+            displayObjectContainerRemovedToStageService(display_object);
+        }
+    }
+    // remove root and stage
+    if ($stageAssignedMap.has(display_object_container.instanceId)) {
+        $rootMap.delete(display_object);
+        $stageAssignedMap.delete(display_object.instanceId);
+        if (display_object.isVideo) {
+            display_object.pause();
+        }
+        // コンテナであれば子孫の DisplayObject に対しても Stage と Root を解除
+        if (display_object.isContainerEnabled) {
+            displayObjectContainerUnAssignStageAndRootService(display_object);
+        }
+    }
+    // remove parent-child relationship
+    display_object.parent = null;
+    // apply changes
+    displayObjectApplyChangesService(display_object_container);
+};

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

@@ -0,0 +1,12 @@
+import type { DisplayObjectContainer } from "../../DisplayObjectContainer";
+/**
+ * @description 配列で指定されたインデックスの子をコンテナから削除します
+ *              Removes children of the index specified in the array from the container
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @param  {number[]} indexes
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: <C extends DisplayObjectContainer>(display_object_container: C, indexes: number[]) => void;

package/src/DisplayObjectContainer/usecase/DisplayObjectContainerRemoveChildrenUseCase.js

@@ -0,0 +1,25 @@
+import { execute as displayObjectContainerRemoveChildUseCase } from "./DisplayObjectContainerRemoveChildUseCase";
+/**
+ * @description 配列で指定されたインデックスの子をコンテナから削除します
+ *              Removes children of the index specified in the array from the container
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @param  {number[]} indexes
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (display_object_container, indexes) => {
+    const children = display_object_container.children.slice();
+    if (!children.length) {
+        return;
+    }
+    for (let idx = 0; idx < indexes.length; idx++) {
+        const index = indexes[idx];
+        const child = children[index];
+        if (!child) {
+            continue;
+        }
+        displayObjectContainerRemoveChildUseCase(display_object_container, child);
+    }
+};

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

@@ -0,0 +1,14 @@
+import type { DisplayObject } from "../../DisplayObject";
+import type { DisplayObjectContainer } from "../../DisplayObjectContainer";
+/**
+ * @description 指定されたインデックスに子を移動します
+ *              Moves the child to the specified index
+ *
+ * @param  {DisplayObjectContainer} display_object_container
+ * @param  {DisplayObject} display_object
+ * @param  {number} index
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: <C extends DisplayObjectContainer, D extends DisplayObject>(display_object_container: C, display_object: D, index: number) => void;