Fixes to the InputPlugin re: drop zones and addition of setInteractive argument.

Author: photonstorm

CHANGELOG.md

@@ -10,6 +10,8 @@
 * Load.plugin now accepts a class as an argument as well as a URL string (thanks @nkholski)
 * Tween.complete will allow you to flag a tween as being complete, no matter what stage it is at. If an onComplete callback has been defined it will be invoked. You can set an optional delay before this happens (thanks @Jerenaux for the idea)
 * The Headless render mode has been implemented. You can now set HEADLESS as the `renderType` in the Game Config and it will run a special game step that skips rendering. It will still create a Canvas element, as lots of internal systems (like input) rely on it, but it will not draw anything to it. Fix #3256 (thanks @rgk)
+* GameObject.setInteractive has a new boolean argument `dropZone` which will allow you to set the object as being a drop zone right from the method.
+* Sprites can now be drop zones and have other Game Objects dragged onto them as targets.
 
 ### Bug Fixes
 
@@ -19,6 +21,9 @@
 * Swapped the queue loop in the SceneManager to to use `_queue.length` rather than a cached length (thanks @srobertson421)
 * When calling `ScenePlugin.launch` the `data` argument is now passed to the queued scenes (thanks @gaudeon)
 * Rectangle.top wouldn't reset the `y` position if the value given never exceed the Rectangles bottom. Fix #3290 (thanks @chancezeus)
+* The implementation of `topOnly` within the Input Manager had broken the way drop zones worked, as they were now filtered out of the display list before processing. Drop zones are now treated on their own in the Input Plugin meaning you can still have `topOnly` set and still drop an item into a drop zone. This indirectly fixed #3291 (thanks @rexrainbow)
+* InputPlugin.clear now properly removes a Game Object from all internal arrays, not just the _list.
+* InputPlugin.processOverOut no longer considers an item as being 'out' if it's in the internal `_drag` array.
 
 ### Updates
 

src/gameobjects/GameObject.js

@@ -255,12 +255,13 @@ var GameObject = new Class({
      *
      * @param {any} [shape] - A geometric shape that defines the hit area for the Game Object. If not specified a Rectangle will be used.
      * @param {function} [callback] - A callback to be invoked when the Game Object is interacted with.
+     * @param {boolean} [dropZone=false] - Should this Game Object be treated as a drop zone target?
      * 
      * @return {Phaser.GameObjects.GameObject} This GameObject.
      */
-    setInteractive: function (shape, callback)
+    setInteractive: function (shape, callback, dropZone)
     {
-        this.scene.sys.input.enable(this, shape, callback);
+        this.scene.sys.input.enable(this, shape, callback, dropZone);
 
         return this;
     },

src/gameobjects/zone/Zone.js

@@ -251,10 +251,8 @@ var Zone = new Class({
         {
             if (!this.input)
             {
-                this.setInteractive(shape, callback);
+                this.setInteractive(shape, callback, true);
             }
-
-            this.input.dropZone = true;
         }
 
         return this;

src/input/InputPlugin.js

@@ -184,6 +184,17 @@ var InputPlugin = new Class({
          */
         this._temp = [];
 
+        /**
+         * Used to temporarily store the results of the Hit Test dropZones
+         *
+         * @name Phaser.Input.InputPlugin#_tempZones
+         * @type {array}
+         * @private
+         * @default []
+         * @since 3.0.0
+         */
+        this._tempZones = [];
+
         /**
          * A list of all Game Objects that have been set to be interactive.
          *
@@ -314,8 +325,6 @@ var InputPlugin = new Class({
             {
                 current.splice(index, 1);
 
-                //  TODO: Clear from _draggable, _drag and _over too
-
                 this.clear(gameObject);
             }
         }
@@ -333,9 +342,9 @@ var InputPlugin = new Class({
      * @method Phaser.Input.InputPlugin#clear
      * @since 3.0.0
      *
-     * @param {[type]} gameObject - [description]
+     * @param {Phaser.GameObjects.GameObject} gameObject - [description]
      *
-     * @return {[type]} [description]
+     * @return {Phaser.GameObjects.GameObject} [description]
      */
     clear: function (gameObject)
     {
@@ -349,6 +358,28 @@ var InputPlugin = new Class({
 
         gameObject.input = null;
 
+        //  Clear from _draggable, _drag and _over
+        var index = this._draggable.indexOf(gameObject);
+
+        if (index > -1)
+        {
+            this._draggable.splice(index, 1);
+        }
+
+        index = this._drag.indexOf(gameObject);
+
+        if (index > -1)
+        {
+            this._drag.splice(index, 1);
+        }
+
+        index = this._over.indexOf(gameObject);
+
+        if (index > -1)
+        {
+            this._over.splice(index, 1);
+        }
+
         return gameObject;
     },
 
@@ -358,7 +389,7 @@ var InputPlugin = new Class({
      * @method Phaser.Input.InputPlugin#disable
      * @since 3.0.0
      *
-     * @param {[type]} gameObject - [description]
+     * @param {Phaser.GameObjects.GameObject} gameObject - [description]
      */
     disable: function (gameObject)
     {
@@ -371,14 +402,17 @@ var InputPlugin = new Class({
      * @method Phaser.Input.InputPlugin#enable
      * @since 3.0.0
      *
-     * @param {[type]} gameObject - [description]
-     * @param {[type]} shape - [description]
-     * @param {[type]} callback - [description]
+     * @param {Phaser.GameObjects.GameObject} gameObject - [description]
+     * @param {object} shape - [description]
+     * @param {function} callback - [description]
+     * @param {boolean} [dropZone=false] - [description]
      *
-     * @return {[type]} [description]
+     * @return {Phaser.Input.InputPlugin} This Input Plugin.
      */
-    enable: function (gameObject, shape, callback)
+    enable: function (gameObject, shape, callback, dropZone)
     {
+        if (dropZone === undefined) { dropZone = false; }
+
         if (gameObject.input)
         {
             //  If it is already has an InteractiveObject then just enable it and return
@@ -389,6 +423,8 @@ var InputPlugin = new Class({
             //  Create an InteractiveObject and enable it
             this.setHitArea(gameObject, shape, callback);
         }
+        
+        gameObject.input.dropZone = dropZone;
 
         return this;
     },
@@ -401,7 +437,7 @@ var InputPlugin = new Class({
      *
      * @param {[type]} pointer - [description]
      *
-     * @return {[type]} [description]
+     * @return {array} [description]
      */
     hitTestPointer: function (pointer)
     {
@@ -413,7 +449,20 @@ var InputPlugin = new Class({
 
             //  Get a list of all objects that can be seen by the camera below the pointer in the scene and store in 'output' array.
             //  All objects in this array are input enabled, as checked by the hitTest method, so we don't need to check later on as well.
-            return this.manager.hitTest(pointer.x, pointer.y, this._list, camera);
+            var over = this.manager.hitTest(pointer.x, pointer.y, this._list, camera);
+
+            //  Filter out the drop zones
+            for (var i = 0; i < over.length; i++)
+            {
+                var obj = over[i];
+
+                if (obj.input.dropZone)
+                {
+                    this._tempZones.push(obj);
+                }
+            }
+
+            return over;
         }
         else
         {
@@ -466,10 +515,10 @@ var InputPlugin = new Class({
      * @method Phaser.Input.InputPlugin#processDragEvents
      * @since 3.0.0
      *
-     * @param {[type]} pointer - [description]
-     * @param {[type]} time - [description]
+     * @param {number} pointer - [description]
+     * @param {number} time - [description]
      *
-     * @return {[type]} [description]
+     * @return {integer} [description]
      */
     processDragEvents: function (pointer, time)
     {
@@ -601,16 +650,7 @@ var InputPlugin = new Class({
         //  4 = Pointer actively dragging the draglist and has moved
         if (pointer.dragState === 4 && pointer.justMoved)
         {
-            //  Let's filter out currentlyOver for dropZones only
-            var dropZones = [];
-
-            for (c = 0; c < currentlyOver.length; c++)
-            {
-                if (currentlyOver[c].input.dropZone)
-                {
-                    dropZones.push(currentlyOver[c]);
-                }
-            }
+            var dropZones = this._tempZones;
 
             list = this._drag[pointer.id];
 
@@ -793,6 +833,7 @@ var InputPlugin = new Class({
         var justOver = [];
         var stillOver = [];
         var previouslyOver = this._over[pointer.id];
+        var currentlyDragging = this._drag[pointer.id];
 
         //  Go through all objects the pointer was previously over, and see if it still is.
         //  Splits the previouslyOver array into two parts: justOut and stillOver
@@ -801,7 +842,7 @@ var InputPlugin = new Class({
         {
             gameObject = previouslyOver[i];
 
-            if (currentlyOver.indexOf(gameObject) === -1)
+            if (currentlyOver.indexOf(gameObject) === -1 && currentlyDragging.indexOf(gameObject) === -1)
             {
                 //  Not in the currentlyOver array, so must be outside of this object now
                 justOut.push(gameObject);
@@ -1398,10 +1439,8 @@ var InputPlugin = new Class({
      * @method Phaser.Input.InputPlugin#update
      * @since 3.0.0
      *
-     * @param {[type]} time - [description]
-     * @param {[type]} delta - [description]
-     *
-     * @return {[type]} [description]
+     * @param {number} time - [description]
+     * @param {number} delta - [description]
      */
     update: function (time, delta)
     {
@@ -1435,14 +1474,27 @@ var InputPlugin = new Class({
             return;
         }
 
+        //  Always reset this array
+        this._tempZones = [];
+
+        //  _temp contains a hit tested and camera culled list of IO objects
         this._temp = this.hitTestPointer(pointer);
 
         this.sortGameObjects(this._temp);
+        this.sortGameObjects(this._tempZones);
 
-        if (this.topOnly && this._temp.length)
+        if (this.topOnly)
         {
             //  Only the top-most one counts now, so safely ignore the rest
-            this._temp.splice(1);
+            if (this._temp.length)
+            {
+                this._temp.splice(1);
+            }
+
+            if (this._tempZones.length)
+            {
+                this._tempZones.splice(1);
+            }
         }
 
         var total = this.processDragEvents(pointer, time);