Skip to content

Commit

Permalink
#154 DisplayObjectの関数を実装(WIP)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ienaga
ienaga committed Dec 4, 2024
1 parent 294bbbb commit 1001aa0
Show file tree
Hide file tree
Showing 8 changed files with 408 additions and 188 deletions.
34 changes: 33 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,39 @@
<script>
window.addEventListener("DOMContentLoaded", async () =>
{
next2d.load("develop");
// next2d.load("develop");

const { Sprite, Shape } = next2d.display;
const { PointerEvent } = next2d.events;

const root = await next2d.createRootMovieClip(480, 480);
const sprite = root.addChild(new Sprite());
sprite.buttonMode = true;

const shape1 = sprite.addChild(new Shape());
shape1
.graphics
.beginFill("#ff0000")
.drawRect(0, 0, 100, 100);

const shape2 = sprite.addChild(new Shape());
shape2
.graphics
.beginFill("#00ff00")
.drawRect(30, 30, 100, 100);

const shape3 = sprite.addChild(new Shape());
shape3
.graphics
.beginFill("#0000ff")
.drawRect(60, 60, 100, 100);

sprite.x = 100;
sprite.y = 100;
sprite.addEventListener(PointerEvent.POINTER_DOWN, () =>
{
console.log(sprite.getBounds(root));
});
});
</script>
</body>
Expand Down
224 changes: 45 additions & 179 deletions packages/display/src/DisplayObject.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,17 @@ import { execute as displayObjectGlobalToLocalService } from "./DisplayObject/se
import { execute as displayObjectGetHeightUseCase } from "./DisplayObject/usecase/DisplayObjectGetHeightUseCase";
import { execute as displayObjectSetHeightUseCase } from "./DisplayObject/usecase/DisplayObjectSetHeightUseCase";
import { execute as displayObjectRemoveService } from "./DisplayObject/service/DisplayObjectRemoveService";
import { execute as displayObjectGetBoundsUseCase } from "./DisplayObject/usecase/DisplayObjectGetBoundsUseCase";
import { execute as displayObjectHitTestObjectUseCase } from "./DisplayObject/usecase/DisplayObjectHitTestObjectUseCase";
import { execute as displayObjectHitTestPointUseCase } from "./DisplayObject/usecase/DisplayObjectHitTestPointUseCase";
import {
$getInstanceId,
$parentMap,
$loaderInfoMap,
$rootMap,
$variables,
$getDraggingDisplayObject
$getDraggingDisplayObject,
$pointer
} from "./DisplayObjectUtil";

/**
Expand Down Expand Up @@ -554,36 +558,32 @@ export class DisplayObject extends EventDispatcher
}

/**
* @description マウスまたはユーザー入力デバイスの x 軸の位置をピクセルで示します。
* Indicates the x coordinate of the mouse or user input device position, in pixels.
* @description 対象のDisplayObjectの基準点からの x 軸の位置をピクセルで示します。
* Indicates the x coordinate of the DisplayObject instance relative to the local coordinates of the parent DisplayObjectContainer.
*
* @member {number}
* @default 0
* @readonly
* @public
*/
// get mouseX (): number
// {
// return $getEvent()
// ? this.globalToLocal($currentMousePoint()).x
// : 0;
// }

// /**
// * @description マウスまたはユーザー入力デバイスの y 軸の位置をピクセルで示します。
// * Indicates the y coordinate of the mouse or user input device position, in pixels.
// *
// * @member {number}
// * @default 0
// * @readonly
// * @public
// */
// get mouseY (): number
// {
// return $getEvent()
// ? this.globalToLocal($currentMousePoint()).y
// : 0;
// }
get mouseX (): number
{
return this.globalToLocal($pointer).x;
}

/**
* @description 対象のDisplayObjectの基準点からの y 軸の位置をピクセルで示します。
* Indicates the y coordinate of the DisplayObject instance relative to the local coordinates of the parent DisplayObjectContainer.
*
* @member {number}
* @default 0
* @readonly
* @public
*/
get mouseY (): number
{
return this.globalToLocal($pointer).y;
}

/**
* @description このDisplayObjectの親のDisplayObjectContainerを返却します。
Expand Down Expand Up @@ -762,68 +762,16 @@ export class DisplayObject extends EventDispatcher
}

/**
* @description targetCoordinateSpace オブジェクトの座標系を基準にして、
* 表示オブジェクトの領域を定義する矩形を返します。
* Returns a rectangle that defines the area
* of the display object relative to the coordinate system
* of the targetCoordinateSpace object.
* @description 指定したDisplayObject の座標系を基準にして、表示オブジェクトの領域を定義する矩形を返します。
* Returns a rectangle that defines the area of the display object relative to the coordinate system of the targetDisplayObject.
*
* @param {DisplayObject} [target=null]
* @param {DisplayObject} [target_display_object=null]
* @return {Rectangle}
*/
// getBounds (target: DisplayObjectImpl<any> | null = null): Rectangle
// {
// const baseBounds: BoundsImpl = "_$getBounds" in this && typeof this._$getBounds === "function"
// ? this._$getBounds() as BoundsImpl
// : $getBoundsObject();

// const matrix: Matrix = this._$transform.concatenatedMatrix;

// // to global
// const bounds: BoundsImpl = $boundsMatrix(baseBounds, matrix._$matrix);

// // pool
// $poolMatrix(matrix);
// $poolBoundsObject(baseBounds);

// // create bounds object
// const targetBaseBounds: BoundsImpl = $getBoundsObject(
// bounds.xMin,
// bounds.xMax,
// bounds.yMin,
// bounds.yMax
// );

// // pool
// $poolBoundsObject(bounds);

// if (!target) {
// target = this;
// }

// const targetMatrix: Matrix = target._$transform.concatenatedMatrix;
// targetMatrix.invert();

// const resultBounds: BoundsImpl = $boundsMatrix(
// targetBaseBounds, targetMatrix._$matrix
// );
// $poolBoundsObject(targetBaseBounds);
// $poolMatrix(targetMatrix);

// const xMin: number = resultBounds.xMin;
// const yMin: number = resultBounds.yMin;
// const xMax: number = resultBounds.xMax;
// const yMax: number = resultBounds.yMax;

// // pool
// $poolBoundsObject(resultBounds);

// return new Rectangle(
// xMin, yMin,
// $Math.abs(xMax - xMin),
// $Math.abs(yMax - yMin)
// );
// }
getBounds <D extends DisplayObject>(target_display_object: D | null = null): Rectangle
{
return displayObjectGetBoundsUseCase(this as unknown as D, target_display_object);
}

/**
* @description point オブジェクトをステージ（グローバル）座標から
Expand All @@ -841,48 +789,17 @@ export class DisplayObject extends EventDispatcher
}

/**
* @description 表示オブジェクトの境界ボックスを評価して、
* obj 表示オブジェクトの境界ボックスと重複または交差するかどうかを調べます。
* Evaluates the bounding box of the display object to see
* if it overlaps or intersects with the bounding box of the obj display object.
* @description DisplayObject の描画範囲を評価して、重複または交差するかどうかを調べます。
* Evaluates a DisplayObject's drawing range to see if it overlaps or intersects.
*
* @param {DisplayObject} object
* @param {DisplayObject} target_display_object
* @returns {boolean}
* @public
*/
// hitTestObject (object: DisplayObjectImpl<any>): boolean
// {
// const baseBounds1: BoundsImpl = "_$getBounds" in this && typeof this._$getBounds === "function"
// ? this._$getBounds() as BoundsImpl
// : $getBoundsObject();

// const matrix1: Matrix = this._$transform.concatenatedMatrix;
// const bounds1: BoundsImpl = $boundsMatrix(baseBounds1, matrix1._$matrix);

// // pool
// $poolMatrix(matrix1);
// $poolBoundsObject(baseBounds1);

// const baseBounds2: BoundsImpl = object._$getBounds(null);
// const matrix2: Matrix = object._$transform.concatenatedMatrix;
// const bounds2: BoundsImpl = $boundsMatrix(baseBounds2, matrix2._$matrix);

// // pool
// $poolMatrix(matrix2);
// $poolBoundsObject(baseBounds2);

// // calc
// const sx: number = $Math.max(bounds1.xMin, bounds2.xMin);
// const sy: number = $Math.max(bounds1.yMin, bounds2.yMin);
// const ex: number = $Math.min(bounds1.xMax, bounds2.xMax);
// const ey: number = $Math.min(bounds1.yMax, bounds2.yMax);

// // pool
// $poolBoundsObject(bounds1);
// $poolBoundsObject(bounds2);

// return ex - sx >= 0 && ey - sy >= 0;
// }
hitTestObject <D extends DisplayObject>(target_display_object: D): boolean
{
return displayObjectHitTestObjectUseCase(this as unknown as DisplayObject, target_display_object);
}

/**
* @description 表示オブジェクトを評価して、x および y パラメーターで指定された
Expand All @@ -896,63 +813,12 @@ export class DisplayObject extends EventDispatcher
* @returns {boolean}
* @public
*/
// hitTestPoint (
// x: number, y: number,
// shape_flag: boolean = false
// ): boolean {

// if (shape_flag) {

// let matrix: Float32Array = $MATRIX_ARRAY_IDENTITY;

// let parent: ParentImpl<any> | null = this._$parent;
// while (parent) {

// matrix = $multiplicationMatrix(
// parent._$transform._$rawMatrix(),
// matrix
// );

// parent = parent._$parent;
// }

// $hitContext.setTransform(1, 0, 0, 1, 0, 0);
// $hitContext.beginPath();

// let result: boolean = false;
// if ("_$hit" in this && typeof this._$hit === "function") {
// result = this._$hit($hitContext, matrix, { "x": x, "y": y }, true);
// }

// if (matrix !== $MATRIX_ARRAY_IDENTITY) {
// $poolFloat32Array6(matrix);
// }

// return result;
// }

// const baseBounds: BoundsImpl = "_$getBounds" in this && typeof this._$getBounds === "function"
// ? this._$getBounds() as BoundsImpl
// : $getBoundsObject();

// const bounds: BoundsImpl = $boundsMatrix(baseBounds, this._$transform._$rawMatrix());
// $poolBoundsObject(baseBounds);

// const rectangle: Rectangle = new Rectangle(
// bounds.xMin, bounds.yMin,
// bounds.xMax - bounds.xMin,
// bounds.yMax - bounds.yMin
// );

// // pool
// $poolBoundsObject(bounds);

// const point: Point = this._$parent
// ? this._$parent.globalToLocal(new Point(x, y))
// : new Point(x, y);

// return rectangle.containsPoint(point);
// }
hitTestPoint (
x: number, y: number,
shape_flag: boolean = false
): boolean {
return displayObjectHitTestPointUseCase(this, x, y, shape_flag);
}

/**
* @description point オブジェクトを表示オブジェクトの（ローカル）座標からステージ（グローバル）座標に変換します。
Expand Down
34 changes: 34 additions & 0 deletions packages/display/src/DisplayObject/usecase/DisplayObjectGetBoundsUseCase.test.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { execute } from "./DisplayObjectGetBoundsUseCase";
import type { DisplayObject } from "../../DisplayObject";
import { DisplayObjectContainer } from "../../DisplayObjectContainer";
import { Shape } from "../../Shape";
import { describe, expect, it } from "vitest";

describe("DisplayObjectGetBoundsUseCase.js test", () =>
{
it("execute test case1", () =>
{
const sprite = new DisplayObjectContainer();

const container = new DisplayObjectContainer();
container.x = 100;
container.y = 100;
sprite.addChild(container);

const contents = new Shape();
contents.graphics.drawCircle(0, 0, 100);
container.addChild(contents);

const bounds1 = execute(contents, container as unknown as DisplayObject);
const bounds2 = execute(contents, sprite as unknown as DisplayObject);

expect(bounds1.x).toBe(-100);
expect(bounds1.y).toBe(-100);
expect(bounds1.width).toBe(200);
expect(bounds1.height).toBe(200);
expect(bounds2.x).toBe(0);
expect(bounds2.y).toBe(0);
expect(bounds2.width).toBe(200);
expect(bounds2.height).toBe(200);
});
});
Loading

0 comments on commit 1001aa0

Please sign in to comment.