#154 DisplayObjectContainerの関数を実装(WIP)

index.html

@@ -14,16 +14,49 @@
 
         const { Sprite, Shape } = next2d.display;
         const { TextField } = next2d.text;
-        const { Video } = next2d.media;
         const { PointerEvent } = next2d.events;
         const { Rectangle } = next2d.geom;
 
         const root = await next2d.createRootMovieClip(480, 480);
+
+        const hitSprite = root.addChild(new Sprite());
+        const hitShape  = hitSprite.addChild(new Shape());
+        hitShape.x = 250;
+        hitShape.y = 250;
+        hitShape
+            .graphics
+            .beginFill("#ff00ee")
+            .drawRect(0, 0, 150, 150);
 
         const sprite = root.addChild(new Sprite());
-        sprite.addChild(new Shape());
-        sprite.addChild(new TextField());
-        sprite.addChild(new Video());
+        sprite.buttonMode = true;
+        sprite.addEventListener(PointerEvent.POINTER_DOWN, (event) => 
+        {
+            sprite.startDrag();
+        });
+        sprite.addEventListener(PointerEvent.POINTER_UP, (event) => 
+        {
+            sprite.stopDrag();
+        });
+
+        const maskShape = new Shape(); //sprite.addChild(new Shape());
+        const viewShape = sprite.addChild(new Shape());
+        viewShape.x = 100;
+        viewShape.y = 100;
+        viewShape
+            .graphics
+            .beginFill("#0eff0e")
+            .drawRect(0, 0, 100, 100);
+
+        maskShape.x = 100;
+        maskShape.y = 100;
+        maskShape
+            .graphics
+            .beginFill("#000")
+            .drawCircle(50, 50, 50);
+
+        // sprite.hitArea = hitSprite;
+        sprite.mask = maskShape;
     });
 </script>
 </body>

packages/core/src/Next2D.ts

@@ -180,4 +180,4 @@ export class Next2D
             width, height, fps, options
         );
     }
-}
+}

packages/display/src/DisplayObjectContainer.ts

@@ -8,6 +8,9 @@ import { execute as displayObjectContainerGetChildAtService } from "./DisplayObj
 import { execute as displayObjectContainerContainsService } from "./DisplayObjectContainer/service/DisplayObjectContainerContainsService";
 import { execute as displayObjectContainerGetChildByNameService } from "./DisplayObjectContainer/service/DisplayObjectContainerGetChildByNameService";
 import { execute as displayObjectContainerRemoveChildrenUseCase } from "./DisplayObjectContainer/usecase/DisplayObjectContainerRemoveChildrenUseCase";
+import { execute as displayObjectContainerSetChildIndexUseCase } from "./DisplayObjectContainer/usecase/DisplayObjectContainerSetChildIndexUseCase";
+import { execute as displayObjectContainerSwapChildrenUseCase } from "./DisplayObjectContainer/usecase/DisplayObjectContainerSwapChildrenUseCase";
+import { execute as displayObjectContainerSwapChildrenAtUseCase } from "./DisplayObjectContainer/usecase/DisplayObjectContainerSwapChildrenAtUseCase";
 import { $getArray } from "./DisplayObjectUtil";
 import { InteractiveObject } from "./InteractiveObject";
 
@@ -87,6 +90,19 @@ export class DisplayObjectContainer extends InteractiveObject
         this._$children = $getArray();
     }
 
+    /**
+     * @description コンテナのアクティブな子要素を返却
+     *              Returns the active child elements of the container.
+     *
+     * @return {array}
+     * @method
+     * @protected
+     */
+    get children (): IDisplayObject<any>[]
+    {
+        return this._$children;
+    }
+
     /**
      * @description このオブジェクトの子の数を返します。
      *              Returns the number of children of this object.
@@ -215,7 +231,7 @@ export class DisplayObjectContainer extends InteractiveObject
      * @method
      * @public
      */
-    getChildIndex <D extends DisplayObject>(display_object: D): number
+    getChildIndex<D extends DisplayObject> (display_object: D): number
     {
         return this.children.indexOf(display_object);
     }
@@ -231,7 +247,7 @@ export class DisplayObjectContainer extends InteractiveObject
      * @method
      * @public
      */
-    removeChild <D extends DisplayObject>(display_object: D): void
+    removeChild<D extends DisplayObject> (display_object: D): void
     {
         displayObjectContainerRemoveChildUseCase(this, display_object);
     }
@@ -269,61 +285,35 @@ export class DisplayObjectContainer extends InteractiveObject
      * @description 表示オブジェクトコンテナの既存の子の位置を変更します。
      *              Changes the position of an existing child in the display object container.
      *
-     * @param  {DisplayObject} child
+     * @param  {DisplayObject} display_object
      * @param  {number} index
      * @return {void}
      * @method
      * @public
      */
-    // setChildIndex (
-    //     child: DisplayObjectImpl<any>,
-    //     index: number
-    // ): void {
-
-    //     const currentIndex: number = this.getChildIndex(child);
-    //     if (currentIndex === index) {
-    //         return ;
-    //     }
-
-    //     const children: DisplayObjectImpl<any>[] = this._$getChildren();
-    //     children.splice(currentIndex, 1);
-    //     children.splice(index, 0, child);
-
-    //     if ($rendererWorker) {
-    //         this._$postChildrenIds();
-    //     }
-
-    //     this._$doChanged();
-    // }
+    setChildIndex<D extends DisplayObject> (
+        display_object: D,
+        index: number
+    ): void {
+        displayObjectContainerSetChildIndexUseCase(this, display_object, index);
+    }
 
     /**
      * @description 指定された 2 つの子オブジェクトの z 順序（重ね順）を入れ替えます。
      *              Swaps the z-order (front-to-back order) of the two specified child objects.
      *
-     * @param  {DisplayObject} child1
-     * @param  {DisplayObject} child2
+     * @param  {DisplayObject} display_object1
+     * @param  {DisplayObject} display_object2
      * @return {void}
      * @method
      * @public
      */
-    // swapChildren (
-    //     child1: DisplayObjectImpl<any>,
-    //     child2: DisplayObjectImpl<any>
-    // ): void {
-
-    //     const children: DisplayObjectImpl<any>[] = this._$getChildren();
-    //     const index1: number = this.getChildIndex(child1);
-    //     const index2: number = this.getChildIndex(child2);
-
-    //     children[index1] = child2;
-    //     children[index2] = child1;
-
-    //     if ($rendererWorker) {
-    //         this._$postChildrenIds();
-    //     }
-
-    //     this._$doChanged();
-    // }
+    swapChildren<D extends DisplayObject> (
+        display_object1: D,
+        display_object2: D
+    ): void {
+        displayObjectContainerSwapChildrenUseCase(this, display_object1, display_object2);
+    }
 
     /**
      * @description 子リスト内の指定されたインデックス位置に該当する 2 つの子オブジェクトの z 順序（重ね順）を入れ替えます。
@@ -336,24 +326,8 @@ export class DisplayObjectContainer extends InteractiveObject
      * @method
      * @public
      */
-    // swapChildrenAt (index1: number, index2: number): void
-    // {
-    //     this.swapChildren(
-    //         this.getChildAt(index1),
-    //         this.getChildAt(index2)
-    //     );
-    // }
-
-    /**
-     * @description コンテナのアクティブな子要素を返却
-     *              Returns the active child elements of the container.
-     *
-     * @return {array}
-     * @method
-     * @protected
-     */
-    get children (): IDisplayObject<any>[]
+    swapChildrenAt (index1: number, index2: number): void
     {
-        return this._$children;
+        displayObjectContainerSwapChildrenAtUseCase(this, index1, index2);
     }
 }

packages/display/src/DisplayObjectContainer/usecase/DisplayObjectContainerRemoveChildUseCase.test.ts

@@ -35,5 +35,4 @@ describe("DisplayObjectContainerRemoveChildUseCase.js test", () =>
 
         expect(container.changed).toBe(true);
     });
-
 });

packages/display/src/DisplayObjectContainer/usecase/DisplayObjectContainerSetChildIndexUseCase.test.ts

@@ -0,0 +1,57 @@
+import { execute } from "./DisplayObjectContainerSetChildIndexUseCase";
+import { Shape } from "../../Shape";
+import { DisplayObjectContainer } from "../../DisplayObjectContainer";
+import { describe, expect, it } from "vitest";
+
+describe("DisplayObjectContainerSetChildIndexUseCase.js test", () =>
+{
+    it("execute test case1", () =>
+    {
+        const container = new DisplayObjectContainer();
+        const shape0 = container.addChild(new Shape());
+        const shape1 = container.addChild(new Shape());
+        const shape2 = container.addChild(new Shape());
+        const shape3 = container.addChild(new Shape());
+
+        expect(container.children[0]).toBe(shape0);
+        expect(container.children[1]).toBe(shape1);
+        expect(container.children[2]).toBe(shape2);
+        expect(container.children[3]).toBe(shape3);
+
+        container.changed = false;
+        expect(container.changed).toBe(false);
+
+        execute(container, shape1, 2);
+
+        expect(container.children[0]).toBe(shape0);
+        expect(container.children[1]).toBe(shape2);
+        expect(container.children[2]).toBe(shape1);
+        expect(container.children[3]).toBe(shape3);
+        expect(container.changed).toBe(true);
+    });
+
+    it("execute test case2", () =>
+    {
+        const container = new DisplayObjectContainer();
+        const shape0 = container.addChild(new Shape());
+        const shape1 = container.addChild(new Shape());
+        const shape2 = container.addChild(new Shape());
+        const shape3 = container.addChild(new Shape());
+
+        expect(container.children[0]).toBe(shape0);
+        expect(container.children[1]).toBe(shape1);
+        expect(container.children[2]).toBe(shape2);
+        expect(container.children[3]).toBe(shape3);
+
+        container.changed = false;
+        expect(container.changed).toBe(false);
+
+        execute(container, shape0, 3);
+
+        expect(container.children[0]).toBe(shape1);
+        expect(container.children[1]).toBe(shape2);
+        expect(container.children[2]).toBe(shape3);
+        expect(container.children[3]).toBe(shape0);
+        expect(container.changed).toBe(true);
+    });
+});

packages/display/src/DisplayObjectContainer/usecase/DisplayObjectContainerSetChildIndexUseCase.ts

@@ -0,0 +1,32 @@
+import type { DisplayObject } from "../../DisplayObject";
+import type { DisplayObjectContainer } from "../../DisplayObjectContainer";
+import { execute as displayObjectApplyChangesService } from "../../DisplayObject/service/DisplayObjectApplyChangesService";
+
+/**
+ * @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 const execute = <C extends DisplayObjectContainer, D extends DisplayObject>(
+    display_object_container: C,
+    display_object: D,
+    index: number
+): void => {
+
+    const currentIndex = display_object_container.getChildIndex(display_object);
+    if (currentIndex === -1 || currentIndex === index) {
+        return ;
+    }
+
+    const children = display_object_container.children;
+    children.splice(currentIndex, 1);
+    children.splice(index, 0, display_object);
+
+    displayObjectApplyChangesService(display_object_container);
+};

packages/display/src/DisplayObjectContainer/usecase/DisplayObjectContainerSwapChildrenAtUseCase.test.ts

@@ -0,0 +1,57 @@
+import { execute } from "./DisplayObjectContainerSwapChildrenAtUseCase";
+import { Shape } from "../../Shape";
+import { DisplayObjectContainer } from "../../DisplayObjectContainer";
+import { describe, expect, it } from "vitest";
+
+describe("DisplayObjectContainerSwapChildrenAtUseCase.js test", () =>
+{
+    it("execute test case1", () =>
+    {
+        const container = new DisplayObjectContainer();
+        const shape0 = container.addChild(new Shape());
+        const shape1 = container.addChild(new Shape());
+        const shape2 = container.addChild(new Shape());
+        const shape3 = container.addChild(new Shape());
+
+        expect(container.children[0]).toBe(shape0);
+        expect(container.children[1]).toBe(shape1);
+        expect(container.children[2]).toBe(shape2);
+        expect(container.children[3]).toBe(shape3);
+
+        container.changed = false;
+        expect(container.changed).toBe(false);
+
+        execute(container, 1, 2);
+
+        expect(container.children[0]).toBe(shape0);
+        expect(container.children[1]).toBe(shape2);
+        expect(container.children[2]).toBe(shape1);
+        expect(container.children[3]).toBe(shape3);
+        expect(container.changed).toBe(true);
+    });
+
+    it("execute test case2", () =>
+    {
+        const container = new DisplayObjectContainer();
+        const shape0 = container.addChild(new Shape());
+        const shape1 = container.addChild(new Shape());
+        const shape2 = container.addChild(new Shape());
+        const shape3 = container.addChild(new Shape());
+
+        expect(container.children[0]).toBe(shape0);
+        expect(container.children[1]).toBe(shape1);
+        expect(container.children[2]).toBe(shape2);
+        expect(container.children[3]).toBe(shape3);
+
+        container.changed = false;
+        expect(container.changed).toBe(false);
+
+        execute(container, 0, 3);
+
+        expect(container.children[0]).toBe(shape3);
+        expect(container.children[1]).toBe(shape1);
+        expect(container.children[2]).toBe(shape2);
+        expect(container.children[3]).toBe(shape0);
+        expect(container.changed).toBe(true);
+    });
+});