UI: Fixed tooltip not being hidden on dragging

src/ui/character/CharacterEquipment.spec.ts

@@ -34,7 +34,7 @@ module TK.SpaceTac.UI.Specs {
                 }
             }
             removeEquipment(equipment: CharacterEquipment, destination: CharacterEquipmentContainer | null, test: boolean): boolean {
-                if (this.x < 150 && this.inside == equipment) {
+                if (this.inside === equipment) {
                     if (!test) {
                         this.inside = null;
                     }
@@ -56,14 +56,19 @@ module TK.SpaceTac.UI.Specs {
             let container3 = new FakeContainer("container3", 200);
             let equipment = new CharacterEquipment(sheet, new Equipment(), container1);
             container1.inside = equipment;
+            equipment.setupDragDrop();
             spyOn(sheet, "iEquipmentContainers").and.returnValue(iarray([container1, container2, container3]));
 
+            expect(equipment.inputEnabled).toBe(true, "Input should be enabled");
+            expect(equipment.input.draggable).toBe(true, "Equipment should be draggable");
             expect(equipment.container).toBe(container1);
             expect(equipment.x).toBe(0);
             expect(equipment.scale.x).toBe(0.25);
 
             // drop on nothing
+            expect(equipment.alpha).toBe(1);
             equipment.events.onDragStart.dispatch();
+            expect(equipment.alpha).toBe(0.8);
             equipment.x = 812;
             equipment.events.onDragStop.dispatch();
             expect(equipment.container).toBe(container1);

src/ui/character/CharacterEquipment.ts

@@ -45,7 +45,7 @@ module TK.SpaceTac.UI {
 
             this.anchor.set(0.5, 0.5);
 
-            this.setupDragDrop(sheet);
+            this.setupDragDrop();
             this.snapToContainer();
 
             sheet.view.tooltip.bind(this, filler => this.fillTooltip(filler));
@@ -96,32 +96,30 @@ module TK.SpaceTac.UI {
         /**
          * Enable dragging to another slot
          */
-        setupDragDrop(sheet: CharacterSheet) {
-            this.inputEnabled = true;
+        setupDragDrop() {
             if (this.container.removeEquipment(this, null, true)) {
-                this.input.enableDrag(false, true);
-            }
-
-            this.events.onDragStart.add(() => {
-                this.sheet.view.audio.playOnce("ui-drag");
-                this.scale.set(0.5, 0.5);
-                this.alpha = 0.8;
-            });
-            this.events.onDragStop.add(() => {
-                this.sheet.view.audio.playOnce("ui-drop");
-                let destination = this.findContainerAt(this.x, this.y);
-                if (destination && destination != this.container) {
-                    if (this.applyDragDrop(this.container, destination, false)) {
-                        this.container = destination;
-                        this.snapToContainer();
-                        sheet.refresh();  // TODO Only if required (destination is "virtual")
+                this.sheet.view.inputs.setDragDrop(this, () => {
+                    // Drag
+                    this.scale.set(0.5, 0.5);
+                    this.alpha = 0.8;
+                }, () => {
+                    // Drop
+                    let destination = this.findContainerAt(this.x, this.y);
+                    if (destination && destination != this.container) {
+                        if (this.applyDragDrop(this.container, destination, false)) {
+                            this.container = destination;
+                            this.snapToContainer();
+                            this.sheet.refresh();  // TODO Only if required (destination is "virtual")
+                        } else {
+                            this.snapToContainer();
+                        }
                     } else {
                         this.snapToContainer();
                     }
-                } else {
-                    this.snapToContainer();
-                }
-            });
+                });
+            } else {
+                this.sheet.view.inputs.setDragDrop(this);
+            }
         }
 
         /**
@@ -136,6 +134,7 @@ module TK.SpaceTac.UI {
             } else if (possible) {
                 if (source.removeEquipment(this, destination, false)) {
                     if (destination.addEquipment(this, source, false)) {
+                        this.setupDragDrop();
                         return true;
                     } else {
                         console.error("Destination container refused to accept equipment", this, source, destination);

src/ui/common/InputManager.spec.ts

@@ -98,5 +98,37 @@ module TK.SpaceTac.UI.Specs {
                 done();
             });
         });
+
+        it("handles drag and drop", function () {
+            let builder = new UIBuilder(testgame.view);
+            let button = builder.button("test", 0, 0, () => null, "test tooltip");
+            let tooltip = (<any>testgame.view.tooltip).container;
+
+            expect(button.inputEnabled).toBe(true, "input should be enabled initially");
+            expect(button.input.draggable).toBe(false, "dragging should be disabled initially");
+
+            let x = 0;
+            testgame.view.inputs.setDragDrop(button, () => x += 1, () => x -= 1);
+
+            expect(button.inputEnabled).toBe(true, "input should still be enabled");
+            expect(button.input.draggable).toBe(true, "dragging should be enabled");
+
+            expect(tooltip.visible).toBe(false, "tooltip hidden initially");
+            expect(button.onInputOver.dispatch(button, testgame.ui.input.pointer1));
+            jasmine.clock().tick(1000);
+            expect(tooltip.visible).toBe(true, "tooltip shown");
+
+            expect(x).toBe(0, "initial state");
+            button.events.onDragStart.dispatch();
+            expect(x).toBe(1, "dragged");
+            expect(tooltip.visible).toBe(false, "tooltip hidden on dragging");
+            button.events.onDragStop.dispatch();
+            expect(x).toBe(0, "dropped");
+
+            testgame.view.inputs.setDragDrop(button);
+
+            expect(button.inputEnabled).toBe(true, "input should remain enabled");
+            expect(button.input.draggable).toBe(false, "dragging should be disabled at the end");
+        });
     });
 }

src/ui/common/InputManager.ts

@@ -131,6 +131,30 @@ module TK.SpaceTac.UI {
             }
         }
 
+        /**
+         * Setup dragging on an UI component
+         * 
+         * If no drag or drop function is defined, dragging is disabled
+         */
+        setDragDrop(obj: Phaser.Button | Phaser.Image, drag?: Function, drop?: Function): void {
+            if (drag && drop) {
+                obj.inputEnabled = true;
+                obj.input.enableDrag(false, true);
+
+                obj.events.onDragStart.add(() => {
+                    this.forceLeaveHovered();
+                    this.view.audio.playOnce("ui-drag");
+                    drag();
+                });
+                obj.events.onDragStop.add(() => {
+                    this.view.audio.playOnce("ui-drop");
+                    drop();
+                });
+            } else {
+                obj.input.disableDrag();
+            }
+        }
+
         /**
          * Setup hover/click handlers on an UI element
          *