cancel click events if dragging using "dragThreshold"

pixijs · Aug 8, 2017 · c963103 · c963103
1 parent 4d2409b
commit c963103
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 21 deletions.
diff --git a/bin/pixi-ui.js b/bin/pixi-ui.js
diff --git a/bin/pixi-ui.js.map b/bin/pixi-ui.js.map
diff --git a/bin/pixi-ui.min.js b/bin/pixi-ui.min.js
diff --git a/bin/pixi-ui.min.js.map b/bin/pixi-ui.min.js.map
diff --git a/src/Button.js b/src/Button.js
@@ -148,6 +148,5 @@ Object.defineProperties(Button.prototype, {
  * "blur"
  * "focus"
  * "focusChanged"   param: [bool]isFocussed
- * "change"         param: [bool]isChecked
  *  
  */
diff --git a/src/Interaction/ClickEvent.js b/src/Interaction/ClickEvent.js
@@ -2,11 +2,17 @@
     var bound = false,
         self = this,
         id = 0,
-        ishover = false;
+        ishover = false,
+        mouse = new PIXI.Point(),
+        offset = new PIXI.Point(),
+        movementX = 0,
+        movementY = 0;
+
 
     obj.container.interactive = true;
 
     var _onMouseDown = function (event) {
+        mouse.copy(event.data.global);
         id = event.data.identifier;
         self.onPress.call(obj, event, true);
         if (!bound) {
@@ -20,6 +26,7 @@
 
     var _mouseUpAll = function (event) {
         if (event.data.identifier !== id) return;
+        offset.set(event.data.global.x - mouse.x, event.data.global.y - mouse.y);
         if (bound) {
             obj.container.removeListener('mouseup', _onMouseUp);
             obj.container.removeListener('mouseupoutside', _onMouseUpOutside);
@@ -33,6 +40,11 @@
     var _onMouseUp = function (event) {
         if (event.data.identifier !== id) return;
         _mouseUpAll(event);
+
+        movementX = Math.abs(offset.x);
+        movementY = Math.abs(offset.y);
+        if (Math.max(movementX, movementY) > obj.dragThreshold) return; 
+
         self.onClick.call(obj, event);
     };
 

diff --git a/test/button.html b/test/button.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body, html { margin: 0; padding: 0; width: 100%; height: 100%; }
+        canvas { width: 100% !important; height: 100% !important; position: fixed; }
+    </style>
+    <script src="pixi.js"></script>
+    <script src="../bin/pixi-ui.js"></script>
+    <title></title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
+
+</head>
+<body>
+    <script type="text/javascript">
+        PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.LINEAR;
+        PIXI.settings.RESOLUTION = devicePixelRatio || 1;
+        var renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight, { resolution: devicePixelRatio || 1, transparent: true });
+        var stage = new PIXI.Container();
+        var uiStage = new PIXI.UI.Stage(window.innerWidth, window.innerHeight);
+        uiStage.minHeight = 315;
+        uiStage.minWidth = 500;
+
+        var dragContainer = new PIXI.UI.Container();
+        document.body.appendChild(renderer.view);
+        stage.addChild(uiStage);
+        var resizeFunction = function () {
+            renderer.resize(window.innerWidth, window.innerHeight);
+            uiStage.resize(window.innerWidth, window.innerHeight);
+        }
+        window.addEventListener("resize", resizeFunction);
+        resizeFunction();
+        PIXI.loader.add('UISprites.json').load(function () {
+            init();
+        });
+
+
+        function init() {
+            var cb1_bg = PIXI.Texture.fromFrame("UI/cb-1-bg.png");
+            var cb1_mark = PIXI.Texture.fromFrame("UI/cb-1-mark.png");
+            var cb2_bg = PIXI.Texture.fromFrame("UI/cb-2-bg.png");
+            var cb2_mark = PIXI.Texture.fromFrame("UI/cb-2-mark.png");
+
+            var whiteBG = PIXI.Texture.fromFrame("UI/ui-box-1.png");
+            var innerBG = PIXI.Texture.fromFrame("UI/ui-box-2.png");
+            var solidBox = PIXI.Texture.fromFrame("UI/solid-box.png");
+            var lineSprite = PIXI.Texture.fromFrame("UI/ui-horizontal-line-border.png");
+            var textStyle = { fill: '#000000', fontSize: 18, fontFamily: 'Lucida Sans Typewriter' };
+
+
+            button = new PIXI.UI.Button({
+                background: new PIXI.UI.SliceSprite(PIXI.Texture.fromFrame("UI/cb-1-bg.png"), 10),
+            });
+
+            button.on("hover", function (isHover) {
+                console.log("hover", isHover);
+                PIXI.UI.Tween.to(button, 0.1, { width: isHover ? 100 : 50 });
+            });
+
+            uiStage.addChild(button);
+
+            Update();
+        }
+
+        function Update() {
+            renderer.render(stage);
+            requestAnimationFrame(Update);
+        }
+
+    </script>
+</body>
+</html>