Rewrite touch input logic

examples/board-miniboard/drag.js

@@ -38,9 +38,9 @@ class Demo extends Phaser.Scene {
 
 
         var map = [
+            '0  ',
             '000',
-            '000',
-            '000'
+            '0 0'
         ]
         CreateMiniBoard(this, mainBoard, 500, 150, 0x6495B1, map)
 

plugins/board/miniboard/Methods.js

@@ -15,6 +15,7 @@ import AlignToMainBoard from './mainboard/AlignToMainBoard.js';
 import SetInteractive from './input/SetInteractive.js';
 import SetDraggable from './input/SetDraggable.js';
 import DragEnd from './input/DragEnd.js';
+import IsInTouching from './input/IsInTouching.js';
 
 import CanMirror from './transform/CanMirror.js';
 import Mirror from './transform/Mirror.js';
@@ -42,6 +43,7 @@ export default {
     setInteractive: SetInteractive,
     setDraggable: SetDraggable,
     dragEnd: DragEnd,
+    isInTouching: IsInTouching,
 
     setMainBoard: SetMainBoard,
     canMirror: CanMirror,

plugins/board/miniboard/input/DragEnd.js

@@ -1,18 +1,9 @@
-var DragEnd = function (pointer) {
-    var dragData = this.miniboardInput.drag;
-    // Not dragging
-    if (dragData.state === 0) {
+var DragEnd = function () {
+    if (!this.dragPointer) {
         return;
     }
-
-    if (pointer === undefined) {
-        pointer = this.miniboardInput.pointer;
-    }
-    var dragPosition = dragData.position;
-    var dragX = pointer.x - dragPosition.x;
-    var dragY = pointer.y - dragPosition.y;
-    dragData.state = 0;
-    this.emit('dragend', pointer, dragX, dragY);
+    this.scene.input.setDragState(this.dragPointer, 5);
     return this;
 }
+
 export default DragEnd;

plugins/board/miniboard/input/HitAreaCallback.js

@@ -0,0 +1,11 @@
+const RectangleContains = Phaser.Geom.Rectangle.Contains;
+
+var HitAreaCallback = function (shape, x, y, gameObject) {
+    if (!RectangleContains(shape, x, y)) {
+        return false;
+    }
+
+    return gameObject.isInTouching();
+}
+
+export default HitAreaCallback;

plugins/board/miniboard/input/IsInTouching.js

@@ -0,0 +1,20 @@
+import PointerTest from '../../../utils/input/PointerTest.js';
+
+var IsInTouching = function (pointer) {
+    if (!this.visible) {
+        return false;
+    }
+
+    return PointerTest(this, pointer, MainTest);
+}
+
+var MainTest = function (miniboard, x, y) {
+    miniboard.worldXYToChess(x, y, globChessArray);
+    var isHit = (globChessArray.length > 0);
+    globChessArray.length = 0;
+    return isHit;
+}
+
+var globChessArray = [];
+
+export default IsInTouching;

plugins/board/miniboard/input/RegisterDragEvents.js

@@ -0,0 +1,13 @@
+var RegisterDragEvents = function () {
+    this.dragPointer = null;
+
+    this
+        .on('dragstart', function (pointer, dragX, dragY) {
+            this.dragPointer = pointer;
+        }, this)
+        .on('dragend', function (pointer, dragX, dragY, dropped) {
+            this.dragPointer = null;
+        }, this);
+}
+
+export default RegisterDragEvents;

plugins/board/miniboard/input/RegisterPointerEvents.js

@@ -0,0 +1,29 @@
+var RegisterPointerEvents = function () {
+    this
+        .on('pointerdown', function (pointer, localX, localY, event) {
+            FireTileEvent.call(this, pointer, 'gameobjectdown', 'miniboard.pointerdown');
+        }, this)
+        .on('pointerup', function (pointer, localX, localY, event) {
+            FireTileEvent.call(this, pointer, 'gameobjectup', 'miniboard.pointerup');
+        }, this)
+        .on('pointermove', function (pointer, localX, localY, event) {
+            FireTileEvent.call(this, pointer, 'gameobjectmove', 'miniboard.pointermove');
+        }, this)
+}
+
+var FireTileEvent = function (pointer, miniboardEvent, tileEvent) {
+    var gameObjects = this.worldXYToChess(pointer.worldX, pointer.worldY, globChessArray);
+    var gameObject;
+    for (var i = 0, cnt = gameObjects.length; i < cnt; i++) {
+        gameObject = gameObjects[i];
+        if (gameObject.emit) {
+            gameObject.emit(tileEvent, pointer);
+        }
+        this.emit(miniboardEvent, pointer, gameObject);
+    }
+    globChessArray.length = 0;
+}
+
+var globChessArray = [];
+
+export default RegisterPointerEvents;

plugins/board/miniboard/input/SetDraggable.js

@@ -2,11 +2,8 @@ var SetDraggable = function (enable) {
     if (enable === undefined) {
         enable = true;
     }
-    this.setInteractive();
-    this.miniboardInput.drag.enable = enable;
-    if (!enable) {
-        this.miniboardInput.drag.state = 0;
-    }
+    this.setInteractive({ draggable: true });
+    this.input.draggable = enable;
     return this;
 }
 export default SetDraggable;