+ InputHandler add extended touch methods:

+ .isTouchTap() single executed on tap + .isTocuhHold() single executed on hold + .setTouchDuration(duration) set duration time to hold + InputHandler.touchAutoHold = true|false, default false - set auto trigger to execute hold + InputHandler.touchCount = 0..InputHandler.touchDuration - time how long hold the tap
SkanerSoft · May 29, 2016 · 79e8aaa · 79e8aaa
1 parent e78be57
commit 79e8aaa
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 122 deletions.
diff --git a/dist/application.js b/dist/application.js
@@ -20,6 +20,7 @@ scene.setAutoClear(true);
 lr.add('back', -1).fill('black');
 
 var b = scene.addTextNode(v2f(5, 270), '', 30, 'white', '', 1, 'black');
+var b2 = scene.addTextNode(v2f(5, 240), '', 30, 'white', '', 1, 'black');
 var f = scene.addTextNode(v2f(300, 270), '', 30, 'white', '', 1, 'black');
 var r1 = scene.addRectNode(v2f(40, 40), v2f(50, 50), 'red');
 var r2 = scene.addRectNode(v2f(100, 100), v2f(90, 90), 'green');
@@ -46,7 +47,9 @@ gm.add('myGame', function () {
         if (io.isKeyDown('S')) r1.move(v2f(0, 1));
         if (io.isKeyDown('A')) r1.move(v2f(-1, 0));
         if (io.isKeyDown('D')) r1.move(v2f(1, 0));
-        if (io.isTouch()) console.log(io.getPosition());
+        if (io.isTouch()) b2.drawSimpleText('IS TOUCH');
+        if (io.isTouchTap()) console.log('touchTap', io.getPosition());
+        if (io.isTouchHold()) console.log('touchHold', io.getPosition());
 
         b.drawSimpleText(io.onNode([r1, r2, r3]) ? 'TRUE' : 'FALSE');
         //b.drawSimpleText(r1.isIntersect([r2, r3]) ? 'TRUE' : 'FALSE');

diff --git a/dist/js/j2ds.min.js b/dist/js/j2ds.min.js
diff --git a/dist/js/j2ds.min.map b/dist/js/j2ds.min.map
diff --git a/gulpfile.js b/gulpfile.js
@@ -46,7 +46,6 @@ var paths = {
 
         'src/js/io/AudioHandler.js',
         'src/js/io/InputHandler.js',
-        'src/js/io/TouchHandler.js',
 
         'src/js/core/Layers.js',
         'src/js/core/Scene.js',

diff --git a/src/js/io/InputHandler.js b/src/js/io/InputHandler.js
@@ -25,6 +25,11 @@
         this.y = 0;
         this.screenPos = {x: 0, y: 0};
         this.touch = false;
+        this.touchTap = false;
+        this.touchHold = false;
+        this.touchAutoHold = false;
+        this.touchCount = 0;
+        this.touchDuration = 60;
         this.keyDown = [];
         this.keyPress = [];
         this.keyPressed = [];
@@ -146,6 +151,8 @@
         this.mousePress = [];
         this.mouseUp = [];
         this.mouseWheel = 0;
+        this.touchHold = false;
+        this.touchTap = false;
     };
 
     InputHandler.prototype.isKeyDown = function (code) {
@@ -216,6 +223,10 @@
             this.canceled = true;
             this.keyDown = [];
             this.mouseDown = [];
+            this.touchHold = false;
+            this.touchTap = false;
+            this.touch = false;
+            this.touchCount = 0;
         } else {
             this.keyDown[this.jKey[id]] = false;
         }
@@ -242,6 +253,12 @@
         this.y = (this.screenPos.y / dY);
         this.pos.x = this.j2Ds.scene.view.pos.x + this.x;
         this.pos.y = this.j2Ds.scene.view.pos.y + this.y;
+
+        if (this.touchCount > 0 && this.touchCount < this.touchDuration) this.touchCount++;
+        // Repeater TouchHold
+        if (!this.touchHold && this.touchCount >= this.touchDuration) {
+            if (this.touchAutoHold) this.touchHold = true;
+        }
     };
 
     InputHandler.prototype.onMove = function (e) {
@@ -268,6 +285,18 @@
         return this.touch;
     };
 
+    InputHandler.prototype.isTouchTap = function () {
+        return this.touchTap;
+    };
+
+    InputHandler.prototype.isTouchHold = function () {
+        return this.touchHold;
+    };
+
+    InputHandler.prototype.setTouchDuration = function (duration) {
+        return this.touchDuration = (duration > 0) ? duration : 60;
+    };
+
     InputHandler.prototype.isMouseWheel = function (code) {
         return (code == 'UP' && this.mouseWheel > 0) ||
             (code == 'DOWN' && this.mouseWheel < 0)
@@ -313,10 +342,12 @@
         var input = this.j2Ds.input;
         if (!input.enabled) return false;
         e.preventDefault();
-        input.touch = (!input.canceled);
+
+        if (input.touchCount == 0) input.touchCount++;
 
         if (!input.canceled) {
             input.mouseDown = [];
+            input.touch = !input.canceled;
         }
 
         input.screenPos.x = -input.j2Ds.scene.offsetLeft + e.touches[0].pageX;
@@ -363,11 +394,19 @@
             input.j2Ds.window.addEventListener('touchmove', input.onTouchEvent);
             input.j2Ds.window.addEventListener('touchend', function () {
                 input.canceled = false;
+                if (input.touchCount >= input.touchDuration) {
+                    input.touchHold = true;
+                    input.touchTap = false;
+                    input.touchCount = 0;
+                } else if (input.touchCount >= 0 && input.touchCount < input.touchDuration) {
+                    input.touchTap = true;
+                    input.touchHold = false;
+                    input.touchCount = 0;
+                }
                 input.touch = false;
             });
             input.j2Ds.window.addEventListener('touchcancel', function () {
                 input.canceled = false;
-                input.touch = false;
             });
             input.j2Ds.window.oncontextmenu = function () {
                 return false;

diff --git a/src/js/io/TouchHandler.js b/src/js/io/TouchHandler.js
diff --git a/src/js/j2Ds.js b/src/js/j2Ds.js
@@ -20,7 +20,6 @@
 
             'io/AudioHandler',
             'io/InputHandler',
-            'io/TouchHandler',
 
             'managers/DeviceManager',
             'managers/ErrorManager',
@@ -44,7 +43,6 @@
 
             require('io/AudioHandler'),
             require('io/InputHandler'),
-            require('io/TouchHandler'),
 
             require('managers/DeviceManager'),
             require('managers/ErrorManager'),
@@ -68,7 +66,6 @@
 
             root.modules.io.AudioHandler,
             root.modules.io.InputHandler,
-            root.modules.io.TouchHandler,
 
             root.modules.managers.DeviceManager,
             root.modules.managers.ErrorManager,
@@ -91,7 +88,6 @@
               Scene,
               AudioHandler,
               InputHandler,
-              TouchHandler,
               DeviceManager,
               ErrorManager,
               FPSManager,
@@ -226,14 +222,6 @@
             return this.input;
         };
 
-        /**
-         * @returns {TouchHandler}
-         */
-        j2DsEngine.prototype.getTouchIO = function () {
-            this.touch.init();
-            return this.touch;
-        };
-
         /**
          * @returns {Dom}
          */

diff --git a/src/js/nodes/BaseNode.js b/src/js/nodes/BaseNode.js
@@ -69,8 +69,8 @@
 
     /**
      *
-     * @param offset
-     * @param size
+     * @param {{x: number, y: number}} offset
+     * @param {{x: number, y: number}} size
      */
     BaseNode.prototype.resizeBox = function (offset, size) {
         this.box.offset = offset;

diff --git a/tests/2dist/application.js b/tests/2dist/application.js
@@ -20,6 +20,7 @@ scene.setAutoClear(true);
 lr.add('back', -1).fill('black');
 
 var b = scene.addTextNode(v2f(5, 270), '', 30, 'white', '', 1, 'black');
+var b2 = scene.addTextNode(v2f(5, 240), '', 30, 'white', '', 1, 'black');
 var f = scene.addTextNode(v2f(300, 270), '', 30, 'white', '', 1, 'black');
 var r1 = scene.addRectNode(v2f(40, 40), v2f(50, 50), 'red');
 var r2 = scene.addRectNode(v2f(100, 100), v2f(90, 90), 'green');
@@ -46,7 +47,9 @@ gm.add('myGame', function () {
         if (io.isKeyDown('S')) r1.move(v2f(0, 1));
         if (io.isKeyDown('A')) r1.move(v2f(-1, 0));
         if (io.isKeyDown('D')) r1.move(v2f(1, 0));
-        if (io.isTouch()) console.log(io.getPosition());
+        if (io.isTouch()) b2.drawSimpleText('IS TOUCH');
+        if (io.isTouchTap()) console.log('touchTap', io.getPosition());
+        if (io.isTouchHold()) console.log('touchHold', io.getPosition());
 
         b.drawSimpleText(io.onNode([r1, r2, r3]) ? 'TRUE' : 'FALSE');
         //b.drawSimpleText(r1.isIntersect([r2, r3]) ? 'TRUE' : 'FALSE');