Merge pull request #4733 from TrevorDev/detachCameraDuringDrag

Gizmo fixes

dist/preview release/what's new.md

@@ -7,7 +7,7 @@
 - New GUI 3D controls toolset. [Complete doc + demos](http://doc.babylonjs.com/how_to/gui3d) ([Deltakosh](https://github.com/deltakosh))
 - Added [Environment Texture Tools](https://doc.babylonjs.com/how_to/physically_based_rendering#creating-a-compressed-environment-texture) to reduce the size of the usual .DDS file ([sebavan](http://www.github.com/sebavan))
 - New GUI control: the [Grid](http://doc.babylonjs.com/how_to/gui#grid) ([Deltakosh](https://github.com/deltakosh))
-- Gizmo and GizmoManager classes used to manipulate meshes in a scene. Gizmo types include: position, scale, rotation and bounding box. [Doc](http://doc.babylonjs.com/how_to/gizmo) ([TrevorDev](https://github.com/TrevorDev))
+- Gizmo and GizmoManager classes used to manipulate meshes in a scene. Gizmo types include: position, rotation, scale and bounding box. [Doc](http://doc.babylonjs.com/how_to/gizmo) ([TrevorDev](https://github.com/TrevorDev))
 - New behaviors: PointerDragBehavior, SixDofDragBehavior and MultiPointerScaleBehavior to enable smooth drag and drop/scaling with mouse or 6dof controller on a mesh. [Doc](http://doc.babylonjs.com/how_to/meshbehavior) ([TrevorDev](https://github.com/TrevorDev))
 - Particle system improvements ([Deltakosh](https://github.com/deltakosh))
   - Added a ParticleHelper class to create some pre-configured particle systems in a one-liner method style. [Doc](https://doc.babylonjs.com/How_To/ParticleHelper) ([Deltakosh](https://github.com/deltakosh)) / ([DevChris](https://github.com/yovanoc))

src/Behaviors/Mesh/babylon.pointerDragBehavior.ts

@@ -65,6 +65,10 @@ module BABYLON {
          *  If the drag behavior will react to drag events (Default: true)
          */
         public enabled = true;
+        /**
+         * If camera controls should be detached during the drag
+         */
+        public detatchCameraControls = true;
         
         /**
          * If set, the drag plane/axis will be rotated based on the attached mesh's world rotation (Default: true)
@@ -122,6 +126,11 @@ module BABYLON {
                     PointerDragBehavior._planeScene = new BABYLON.Scene(this._scene.getEngine());
                     PointerDragBehavior._planeScene.detachControl();
                     this._scene.getEngine().scenes.pop();
+                    var sceneDisposeObserver = this._scene.onDisposeObservable.add(()=>{
+                        PointerDragBehavior._planeScene.dispose();
+                        (<any>PointerDragBehavior._planeScene) = null;
+                        this._scene.onDisposeObservable.remove(sceneDisposeObserver);
+                    })
                 }
             }
             this._dragPlane = BABYLON.Mesh.CreatePlane("pointerDragPlane", this._debugMode ? 1 : 10000, PointerDragBehavior._planeScene, false, BABYLON.Mesh.DOUBLESIDE);
@@ -136,6 +145,7 @@ module BABYLON {
                 return this._attachedNode == m || m.isDescendantOf(this._attachedNode)
             }
 
+            var attachedElement:Nullable<HTMLElement> = null;
             this._pointerObserver = this._scene.onPointerObservable.add((pointerInfo, eventState)=>{
                 if(!this.enabled){
                     return;
@@ -152,11 +162,26 @@ module BABYLON {
                             this.lastDragPosition.copyFrom(pickedPoint);
                             this.onDragStartObservable.notifyObservers({dragPlanePoint: pickedPoint, pointerId: this.currentDraggingPointerID});
                             targetPosition.copyFrom((<Mesh>this._attachedNode).absolutePosition)
+
+                            // Detatch camera controls
+                            if(this.detatchCameraControls && this._scene.activeCamera){
+                                if(this._scene.activeCamera.inputs.attachedElement){
+                                    attachedElement = this._scene.activeCamera.inputs.attachedElement;
+                                    this._scene.activeCamera.detachControl(this._scene.activeCamera.inputs.attachedElement);
+                                }else{
+                                    attachedElement = null;
+                                }
+                            }
                         }
                     }
                 }else if(pointerInfo.type == BABYLON.PointerEventTypes.POINTERUP){
                     if(this.currentDraggingPointerID == (<PointerEvent>pointerInfo.event).pointerId){
                         this.releaseDrag();
+
+                        // Reattach camera controls
+                        if(this.detatchCameraControls && attachedElement && this._scene.activeCamera){
+                            this._scene.activeCamera.attachControl(attachedElement, true);
+                        }
                     }
                 }else if(pointerInfo.type == BABYLON.PointerEventTypes.POINTERMOVE){
                     if(this.currentDraggingPointerID == (<PointerEvent>pointerInfo.event).pointerId && this.dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.ray){

src/Behaviors/Mesh/babylon.sixDofDragBehavior.ts

@@ -29,6 +29,10 @@ module BABYLON {
          * The id of the pointer that is currently interacting with the behavior (-1 when no pointer is active)
          */
         public currentDraggingPointerID = -1;
+        /**
+         * If camera controls should be detached during the drag
+         */
+        public detatchCameraControls = true;
 
 
         constructor(){
@@ -70,7 +74,7 @@ module BABYLON {
             var pickPredicate = (m:AbstractMesh)=>{
                 return this._ownerNode == m || m.isDescendantOf(this._ownerNode);
             }
-            
+            var attachedElement:Nullable<HTMLElement> = null;
             this._pointerObserver = this._scene.onPointerObservable.add((pointerInfo, eventState)=>{                
                 if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERDOWN) {
                     if(!this.dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.hit && pointerInfo.pickInfo.pickedMesh && pointerInfo.pickInfo.ray && pickPredicate(pointerInfo.pickInfo.pickedMesh)){
@@ -101,6 +105,16 @@ module BABYLON {
                         this._targetPosition.copyFrom(this._virtualDragMesh.absolutePosition);
                         this.dragging = true;
                         this.currentDraggingPointerID = (<PointerEvent>pointerInfo.event).pointerId;
+
+                        // Detatch camera controls
+                        if(this.detatchCameraControls && this._scene.activeCamera){
+                            if(this._scene.activeCamera.inputs.attachedElement){
+                                attachedElement = this._scene.activeCamera.inputs.attachedElement;
+                                this._scene.activeCamera.detachControl(this._scene.activeCamera.inputs.attachedElement);
+                            }else{
+                                attachedElement = null;
+                            }
+                        }
                     }
                 }else if(pointerInfo.type == BABYLON.PointerEventTypes.POINTERUP){
                     if(this.currentDraggingPointerID == (<PointerEvent>pointerInfo.event).pointerId){
@@ -109,6 +123,11 @@ module BABYLON {
                         this.currentDraggingPointerID = -1;
                         pickedMesh = null;
                         this._virtualOriginMesh.removeChild(this._virtualDragMesh);
+                        
+                        // Reattach camera controls
+                        if(this.detatchCameraControls && attachedElement && this._scene.activeCamera){
+                            this._scene.activeCamera.attachControl(attachedElement, true);
+                        }
                     }
                 }else if(pointerInfo.type == BABYLON.PointerEventTypes.POINTERMOVE){
                     if(this.currentDraggingPointerID == (<PointerEvent>pointerInfo.event).pointerId && this.dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.ray && pickedMesh){