follow size of input-view to change in canvas

akashic-games · Jun 4, 2024 · fbade1e · fbade1e
1 parent 47bf6d1
commit fbade1e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 18 deletions.
diff --git a/src/ContainerController.ts b/src/ContainerController.ts
@@ -123,7 +123,14 @@ export class ContainerController {
 
 		// 入力受け付けレイヤー > 描画レイヤー
 		this.surface = this.resourceFactory.createPrimarySurface(width, height);
-		this.inputHandlerLayer.view.appendChild(this.surface.getHTMLElement());
+		const surfaceElement = this.surface.getHTMLElement();
+		// Canvasの親要素のwidthとheightは範囲外判定で使用するため、Canvasに追従できるようにする必要がある
+		const observer = new MutationObserver(() => {
+			this.inputHandlerLayer.view.style.width = surfaceElement.offsetWidth + "px";
+			this.inputHandlerLayer.view.style.height = surfaceElement.offsetHeight + "px";
+		});
+		observer.observe(surfaceElement, { attributeFilter: ["width", "height", "style"] });
+		this.inputHandlerLayer.view.appendChild(surfaceElement);
 		// containerController -> input -> canvas
 		this.container.appendChild(this.inputHandlerLayer.view);
 	}

diff --git a/src/handler/InputEventHandler.ts b/src/handler/InputEventHandler.ts
@@ -22,7 +22,6 @@ export interface PagePosition {
  */
 export abstract class InputEventHandler {
 	inputView: HTMLElement;
-	canvas: HTMLCanvasElement;
 	pointTrigger: Trigger<PlatformPointEvent>;
 
 	protected _xScale: number;
@@ -37,7 +36,6 @@ export abstract class InputEventHandler {
 
 	constructor(inputView: HTMLElement) {
 		this.inputView = inputView;
-		this.canvas = this.inputView.getElementsByTagName("canvas")[0];
 		this.pointerEventLock = {};
 		this._xScale = 1;
 		this._yScale = 1;
@@ -58,8 +56,8 @@ export abstract class InputEventHandler {
 		// chrome で view の境界部分をクリックした際にポイント座標が view の外の座標となることがあるため、view 外の座標の場合は除外する
 		if ( pagePosition.offsetX < 0
 			|| pagePosition.offsetY < 0
-			|| pagePosition.offsetX > this.canvas.width
-			|| pagePosition.offsetY > this.canvas.height
+			|| pagePosition.offsetX > this.inputView.offsetWidth
+			|| pagePosition.offsetY > this.inputView.offsetHeight
 		) return;
 
 		this.pointTrigger.fire({

diff --git a/src/handler/__tests__/InputEventHandler.spec.ts b/src/handler/__tests__/InputEventHandler.spec.ts
@@ -12,21 +12,18 @@ class TestInputEventHandler extends InputEventHandler {
 }
 
 describe("InputEventHandler", () => {
-	const canvasWidth = 640;
-	const canvasHeight = 320;
-	let divElement: HTMLDivElement;
-	beforeAll(() => {
-		divElement = document.createElement("div");
-		const canvas: HTMLCanvasElement = document.createElement("canvas");
-		canvas.width = canvasWidth;
-		canvas.height = canvasHeight;
-		divElement.append(canvas);
+	// レンダリングしていないので offsetWidth,offsetHeight が取得時に 0 となるのでモック化
+	const spyWidth = jest.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockReturnValue(640);
+	const spyHeight = jest.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockReturnValue(320);
+	afterAll(() => {
+		spyWidth.mockClear();
+		spyHeight.mockClear();
 	});
 	describe("DownのDOMイベントが発生済みの時", () => {
 		let handler: InputEventHandler;
 		let identifier: number;
 		beforeEach(() => {
-			handler = new TestInputEventHandler(divElement);
+			handler = new TestInputEventHandler(document.createElement("div"));
 			identifier = 1;
 			handler.pointDown(identifier, {offsetX: 1, offsetY: 1}, PlatformButtonType.Primary);
 		});
@@ -78,7 +75,7 @@ describe("InputEventHandler", () => {
 	});
 	describe("DownのDOMイベントが起きていない時", () => {
 		it("DownのDOMイベントがあればonPointDownが呼ばれる", (done) => {
-			const handler = new TestInputEventHandler(divElement);
+			const handler = new TestInputEventHandler(document.createElement("div"));
 			handler.pointTrigger.add((object) => {
 				expect(object.type).toBe(PlatformPointType.Down);
 				expect(object.identifier).toBe(1);
@@ -92,7 +89,7 @@ describe("InputEventHandler", () => {
 			handler.pointDown(1, {offsetX: 10, offsetY: 10}, PlatformButtonType.Secondary);
 		});
 		it("MoveのDOMイベントあってもonPointMoveは呼び出されない", (done) => {
-			const handler = new TestInputEventHandler(divElement);
+			const handler = new TestInputEventHandler(document.createElement("div"));
 			handler.pointMove(1, {offsetX: 0, offsetY: 0}, PlatformButtonType.Primary);
 			handler.pointTrigger.add(() => {
 				done.fail(new Error("not call!"));
@@ -102,7 +99,7 @@ describe("InputEventHandler", () => {
 			done();
 		});
 		it("view 外の座標の場合 pointDown は呼ばれない", (done) => {
-			const handler = new TestInputEventHandler(divElement);
+			const handler = new TestInputEventHandler(document.createElement("div"));
 			let callCount = 0;
 			handler.pointTrigger.add((_object) => {
 				callCount++;