Merge pull request #306 from akashic-games/fix-pointevent-outside-view

Fix to exclude pointDown event outside view

CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## 2.9.1
+* View の外をクリック時に `pointDown` イベントが発生しないよう修正
+
 ## 2.9.0
 * @akashic/pdi-types@1.13.0 に追従
   * サポートする `CompisiteOperation` に `"difference"` と `"saturation"` を追加(ただし Canvas 描画時のみ)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akashic/pdi-browser",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "An akashic-pdi implementation for Web browsers",
   "main": "index.js",
   "typings": "lib/full/index.d.ts",

src/handler/InputEventHandler.ts

@@ -53,6 +53,13 @@ export abstract class InputEventHandler {
 	}
 
 	pointDown(identifier: number, pagePosition: OffsetPosition, button: PlatformButtonType): void {
+		// chrome で view の境界部分をクリックした際にポイント座標が view の外の座標となることがあるため、view 外の座標の場合は除外する
+		if ( pagePosition.offsetX < 0
+			|| pagePosition.offsetY < 0
+			|| pagePosition.offsetX > this.inputView.offsetWidth
+			|| pagePosition.offsetY > this.inputView.offsetHeight
+		) return;
+
 		this.pointTrigger.fire({
 			type: PlatformPointType.Down,
 			identifier: identifier,

src/handler/__tests__/InputEventHandler.spec.ts

@@ -12,6 +12,13 @@ class TestInputEventHandler extends InputEventHandler {
 }
 
 describe("InputEventHandler", () => {
+	// レンダリングしていないので 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;
@@ -91,5 +98,20 @@ describe("InputEventHandler", () => {
 			expect(true).toBeTruthy();
 			done();
 		});
+		it("view 外の座標の場合 pointDown は呼ばれない", (done) => {
+			const handler = new TestInputEventHandler(document.createElement("div"));
+			let callCount = 0;
+			handler.pointTrigger.add((_object) => {
+				callCount++;
+				done.fail();
+			});
+
+			handler.pointDown(1, {offsetX: -0.1, offsetY: 10}, PlatformButtonType.Primary);
+			handler.pointDown(1, {offsetX: 10, offsetY: -0.01}, PlatformButtonType.Primary);
+			handler.pointDown(1, {offsetX: 640.1, offsetY: 10}, PlatformButtonType.Primary);
+			handler.pointDown(1, {offsetX: 10, offsetY: 320.01}, PlatformButtonType.Primary);
+			expect(callCount).toBe(0);
+			done();
+		});
 	});
 });