Merge pull request #4634 from TrevorDev/gizmoBugFixes

Gizmo bug fixes

src/Gizmos/babylon.axisDragGizmo.ts

@@ -3,7 +3,10 @@ module BABYLON {
      * Single axis drag gizmo
      */
     export class AxisDragGizmo extends Gizmo {
-        private _dragBehavior:PointerDragBehavior;
+        /**
+         * Drag behavior responsible for the gizmos dragging interactions
+         */
+        public dragBehavior:PointerDragBehavior;
         private _pointerObserver:Nullable<Observer<PointerInfo>> = null;
         /**
          * Drag distance in babylon units that the gizmo will snap to when dragged (Default: 0)
@@ -55,10 +58,10 @@ module BABYLON {
             var tmpVector = new Vector3();
             var tmpSnapEvent = {snapDistance: 0};
             // Add drag behavior to handle events when the gizmo is dragged
-            this._dragBehavior = new PointerDragBehavior({dragAxis: dragAxis});
-            this._dragBehavior.moveAttached = false;
-            this._rootMesh.addBehavior(this._dragBehavior);
-            this._dragBehavior.onDragObservable.add((event)=>{
+            this.dragBehavior = new PointerDragBehavior({dragAxis: dragAxis});
+            this.dragBehavior.moveAttached = false;
+            this._rootMesh.addBehavior(this.dragBehavior);
+            this.dragBehavior.onDragObservable.add((event)=>{
                 if(this.attachedMesh){
                     // Snapping logic
                     if(this.snapDistance == 0){
@@ -91,8 +94,8 @@ module BABYLON {
             });
         }
         protected _attachedMeshChanged(value:Nullable<AbstractMesh>){
-            if(this._dragBehavior){
-                this._dragBehavior.enabled = value?true:false;
+            if(this.dragBehavior){
+                this.dragBehavior.enabled = value?true:false;
             }
         }
         /**
@@ -101,7 +104,7 @@ module BABYLON {
         public dispose(){
             this.onSnapObservable.clear();
             this.gizmoLayer.utilityLayerScene.onPointerObservable.remove(this._pointerObserver);
-            this._dragBehavior.detach();
+            this.dragBehavior.detach();
             super.dispose();
         } 
     }

src/Gizmos/babylon.axisScaleGizmo.ts

@@ -3,7 +3,10 @@ module BABYLON {
      * Single axis scale gizmo
      */
     export class AxisScaleGizmo extends Gizmo {
-        private _dragBehavior:PointerDragBehavior;
+        /**
+         * Drag behavior responsible for the gizmos dragging interactions
+         */
+        public dragBehavior:PointerDragBehavior;
         private _pointerObserver:Nullable<Observer<PointerInfo>> = null;
         /**
          * Scale distance in babylon units that the gizmo will snap to when dragged (Default: 0)
@@ -51,14 +54,14 @@ module BABYLON {
             this._rootMesh.addChild(arrow);
 
             // Add drag behavior to handle events when the gizmo is dragged
-            this._dragBehavior = new PointerDragBehavior({dragAxis: dragAxis});
-            this._dragBehavior.moveAttached = false;
-            this._rootMesh.addBehavior(this._dragBehavior);
+            this.dragBehavior = new PointerDragBehavior({dragAxis: dragAxis});
+            this.dragBehavior.moveAttached = false;
+            this._rootMesh.addBehavior(this.dragBehavior);
 
             var currentSnapDragDistance = 0;
             var tmpVector = new Vector3();
             var tmpSnapEvent = {snapDistance: 0};
-            this._dragBehavior.onDragObservable.add((event)=>{                
+            this.dragBehavior.onDragObservable.add((event)=>{                
                 if(this.attachedMesh){
                     // Snapping logic
                     var snapped = false;
@@ -114,8 +117,8 @@ module BABYLON {
         }
         
         protected _attachedMeshChanged(value:Nullable<AbstractMesh>){
-            if(this._dragBehavior){
-                this._dragBehavior.enabled = value ? true : false;
+            if(this.dragBehavior){
+                this.dragBehavior.enabled = value ? true : false;
             }
         }
         
@@ -125,7 +128,7 @@ module BABYLON {
         public dispose(){
             this.onSnapObservable.clear();
             this.gizmoLayer.utilityLayerScene.onPointerObservable.remove(this._pointerObserver);
-            this._dragBehavior.detach();
+            this.dragBehavior.detach();
             super.dispose();
         } 
     }

src/Gizmos/babylon.gizmo.ts

@@ -8,6 +8,7 @@ module BABYLON {
          */
         protected _rootMesh:Mesh;
         private _attachedMesh:Nullable<AbstractMesh>;
+        private _scaleFactor = 3;
         /**
          * Mesh that the gizmo will be attached to. (eg. on a drag gizmo the mesh that will be dragged)
          * * When set, interactions will be enabled
@@ -44,11 +45,8 @@ module BABYLON {
          */
         constructor(/** The utility layer the gizmo will be added to */ public gizmoLayer:UtilityLayerRenderer=UtilityLayerRenderer.DefaultUtilityLayer){
             this._rootMesh = new BABYLON.Mesh("gizmoRootNode",gizmoLayer.utilityLayerScene);
+            var tempVector = new Vector3();
             this._beforeRenderObserver = this.gizmoLayer.utilityLayerScene.onBeforeRenderObservable.add(()=>{
-                if(this._updateScale && this.gizmoLayer.utilityLayerScene.activeCamera && this.attachedMesh){
-                    var dist = this.attachedMesh.position.subtract(this.gizmoLayer.utilityLayerScene.activeCamera.position).length()/3;
-                    this._rootMesh.scaling.set(dist, dist, dist);
-                }
                 if(this.attachedMesh){
                     if(this.updateGizmoRotationToMatchAttachedMesh){
                         if(!this._rootMesh.rotationQuaternion){
@@ -59,6 +57,11 @@ module BABYLON {
                     if(this.updateGizmoPositionToMatchAttachedMesh){
                         this._rootMesh.position.copyFrom(this.attachedMesh.absolutePosition);
                     }
+                    if(this._updateScale && this.gizmoLayer.utilityLayerScene.activeCamera && this.attachedMesh){
+                        this._rootMesh.position.subtractToRef(this.gizmoLayer.utilityLayerScene.activeCamera.position, tempVector);
+                        var dist = tempVector.length()/this._scaleFactor;
+                        this._rootMesh.scaling.set(dist, dist, dist);
+                    }
                 }
             })
             this.attachedMesh = null;

src/Gizmos/babylon.planeRotationGizmo.ts

@@ -3,7 +3,10 @@ module BABYLON {
      * Single plane rotation gizmo
      */
     export class PlaneRotationGizmo extends Gizmo {
-        private _dragBehavior:PointerDragBehavior;
+        /**
+         * Drag behavior responsible for the gizmos dragging interactions
+         */
+        public dragBehavior:PointerDragBehavior;
         private _pointerObserver:Nullable<Observer<PointerInfo>> = null;
         
         /**
@@ -47,13 +50,13 @@ module BABYLON {
             
             this._rootMesh.addChild(parentMesh);
             // Add drag behavior to handle events when the gizmo is dragged
-            this._dragBehavior = new PointerDragBehavior({dragPlaneNormal: planeNormal});
-            this._dragBehavior.moveAttached = false;
-            this._rootMesh.addBehavior(this._dragBehavior);
+            this.dragBehavior = new PointerDragBehavior({dragPlaneNormal: planeNormal});
+            this.dragBehavior.moveAttached = false;
+            this._rootMesh.addBehavior(this.dragBehavior);
 
             var lastDragPosition:Nullable<Vector3> = null;
 
-            this._dragBehavior.onDragStartObservable.add((e)=>{
+            this.dragBehavior.onDragStartObservable.add((e)=>{
                 if(this.attachedMesh){
                     lastDragPosition = e.dragPlanePoint;
                 }
@@ -65,7 +68,7 @@ module BABYLON {
 
             var tmpSnapEvent = {snapDistance: 0};
             var currentSnapDragDistance = 0;
-            this._dragBehavior.onDragObservable.add((event)=>{
+            this.dragBehavior.onDragObservable.add((event)=>{
                 if(this.attachedMesh && lastDragPosition){
                     if(!this.attachedMesh.rotationQuaternion){
                         this.attachedMesh.rotationQuaternion = new BABYLON.Quaternion();
@@ -135,8 +138,8 @@ module BABYLON {
         }
 
         protected _attachedMeshChanged(value:Nullable<AbstractMesh>){
-            if(this._dragBehavior){
-                this._dragBehavior.enabled = value ? true : false;
+            if(this.dragBehavior){
+                this.dragBehavior.enabled = value ? true : false;
             }
         }
 
@@ -146,7 +149,7 @@ module BABYLON {
         public dispose(){
             this.onSnapObservable.clear();
             this.gizmoLayer.utilityLayerScene.onPointerObservable.remove(this._pointerObserver);
-            this._dragBehavior.detach();
+            this.dragBehavior.detach();
             super.dispose();
         } 
     }

src/Gizmos/babylon.positionGizmo.ts

@@ -3,15 +3,24 @@ module BABYLON {
      * Gizmo that enables dragging a mesh along 3 axis
      */
     export class PositionGizmo extends Gizmo {
-        private _xDrag:AxisDragGizmo;
-        private _yDrag:AxisDragGizmo;
-        private _zDrag:AxisDragGizmo;
+        /**
+         * Internal gizmo used for interactions on the x axis
+         */
+        public xGizmo:AxisDragGizmo;
+        /**
+         * Internal gizmo used for interactions on the y axis
+         */
+        public yGizmo:AxisDragGizmo;
+        /**
+         * Internal gizmo used for interactions on the z axis
+         */
+        public zGizmo:AxisDragGizmo;
 
         public set attachedMesh(mesh:Nullable<AbstractMesh>){
-            if(this._xDrag){
-                this._xDrag.attachedMesh = mesh;
-                this._yDrag.attachedMesh = mesh;
-                this._zDrag.attachedMesh = mesh;
+            if(this.xGizmo){
+                this.xGizmo.attachedMesh = mesh;
+                this.yGizmo.attachedMesh = mesh;
+                this.zGizmo.attachedMesh = mesh;
             }
         }
     /**
@@ -20,30 +29,30 @@ module BABYLON {
          */
         constructor(gizmoLayer:UtilityLayerRenderer=UtilityLayerRenderer.DefaultUtilityLayer){
             super(gizmoLayer);
-            this._xDrag = new AxisDragGizmo(new Vector3(1,0,0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
-            this._yDrag = new AxisDragGizmo(new Vector3(0,1,0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
-            this._zDrag = new AxisDragGizmo(new Vector3(0,0,1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
+            this.xGizmo = new AxisDragGizmo(new Vector3(1,0,0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
+            this.yGizmo = new AxisDragGizmo(new Vector3(0,1,0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
+            this.zGizmo = new AxisDragGizmo(new Vector3(0,0,1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
             this.attachedMesh = null;
         }
 
         public set updateGizmoRotationToMatchAttachedMesh(value:boolean){
-            if(this._xDrag){
-                this._xDrag.updateGizmoRotationToMatchAttachedMesh = value;
-                this._yDrag.updateGizmoRotationToMatchAttachedMesh = value;
-                this._zDrag.updateGizmoRotationToMatchAttachedMesh = value;
+            if(this.xGizmo){
+                this.xGizmo.updateGizmoRotationToMatchAttachedMesh = value;
+                this.yGizmo.updateGizmoRotationToMatchAttachedMesh = value;
+                this.zGizmo.updateGizmoRotationToMatchAttachedMesh = value;
             }
         }
         public get updateGizmoRotationToMatchAttachedMesh(){
-            return this._xDrag.updateGizmoRotationToMatchAttachedMesh;
+            return this.xGizmo.updateGizmoRotationToMatchAttachedMesh;
         }
         
         /**
          * Disposes of the gizmo
          */
         public dispose(){
-            this._xDrag.dispose();
-            this._yDrag.dispose();
-            this._zDrag.dispose();
+            this.xGizmo.dispose();
+            this.yGizmo.dispose();
+            this.zGizmo.dispose();
         }
     }
 }

src/Gizmos/babylon.rotationGizmo.ts

@@ -3,15 +3,24 @@ module BABYLON {
      * Gizmo that enables rotating a mesh along 3 axis
      */
     export class RotationGizmo extends Gizmo {
-        private _xDrag:PlaneRotationGizmo;
-        private _yDrag:PlaneRotationGizmo;
-        private _zDrag:PlaneRotationGizmo;
+        /**
+         * Internal gizmo used for interactions on the x axis
+         */
+        public xGizmo:PlaneRotationGizmo;
+        /**
+         * Internal gizmo used for interactions on the y axis
+         */
+        public yGizmo:PlaneRotationGizmo;
+        /**
+         * Internal gizmo used for interactions on the z axis
+         */
+        public zGizmo:PlaneRotationGizmo;
 
         public set attachedMesh(mesh:Nullable<AbstractMesh>){
-            if(this._xDrag){
-                this._xDrag.attachedMesh = mesh;
-                this._yDrag.attachedMesh = mesh;
-                this._zDrag.attachedMesh = mesh;
+            if(this.xGizmo){
+                this.xGizmo.attachedMesh = mesh;
+                this.yGizmo.attachedMesh = mesh;
+                this.zGizmo.attachedMesh = mesh;
             }
         }
         /**
@@ -20,30 +29,30 @@ module BABYLON {
          */
         constructor(gizmoLayer:UtilityLayerRenderer=UtilityLayerRenderer.DefaultUtilityLayer){
             super(gizmoLayer);
-            this._xDrag = new PlaneRotationGizmo(new Vector3(1,0,0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
-            this._yDrag = new PlaneRotationGizmo(new Vector3(0,1,0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
-            this._zDrag = new PlaneRotationGizmo(new Vector3(0,0,1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
+            this.xGizmo = new PlaneRotationGizmo(new Vector3(1,0,0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
+            this.yGizmo = new PlaneRotationGizmo(new Vector3(0,1,0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
+            this.zGizmo = new PlaneRotationGizmo(new Vector3(0,0,1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
             this.attachedMesh = null;
         }
 
         public set updateGizmoRotationToMatchAttachedMesh(value:boolean){
-            if(this._xDrag){
-                this._xDrag.updateGizmoRotationToMatchAttachedMesh = value;
-                this._yDrag.updateGizmoRotationToMatchAttachedMesh = value;
-                this._zDrag.updateGizmoRotationToMatchAttachedMesh = value;
+            if(this.xGizmo){
+                this.xGizmo.updateGizmoRotationToMatchAttachedMesh = value;
+                this.yGizmo.updateGizmoRotationToMatchAttachedMesh = value;
+                this.zGizmo.updateGizmoRotationToMatchAttachedMesh = value;
             }
         }
         public get updateGizmoRotationToMatchAttachedMesh(){
-            return this._xDrag.updateGizmoRotationToMatchAttachedMesh;
+            return this.xGizmo.updateGizmoRotationToMatchAttachedMesh;
         }
 
         /**
          * Disposes of the gizmo
          */
         public dispose(){
-            this._xDrag.dispose();
-            this._yDrag.dispose();
-            this._zDrag.dispose();
+            this.xGizmo.dispose();
+            this.yGizmo.dispose();
+            this.zGizmo.dispose();
         }
     }
 }

src/Gizmos/babylon.scaleGizmo.ts

@@ -3,15 +3,24 @@ module BABYLON {
      * Gizmo that enables scaling a mesh along 3 axis
      */
     export class ScaleGizmo extends Gizmo {
-        private _xDrag:AxisScaleGizmo;
-        private _yDrag:AxisScaleGizmo;
-        private _zDrag:AxisScaleGizmo;
+        /**
+         * Internal gizmo used for interactions on the x axis
+         */
+        public xGizmo:AxisScaleGizmo;
+        /**
+         * Internal gizmo used for interactions on the y axis
+         */
+        public yGizmo:AxisScaleGizmo;
+        /**
+         * Internal gizmo used for interactions on the z axis
+         */
+        public zGizmo:AxisScaleGizmo;
 
         public set attachedMesh(mesh:Nullable<AbstractMesh>){
-            if(this._xDrag){
-                this._xDrag.attachedMesh = mesh;
-                this._yDrag.attachedMesh = mesh;
-                this._zDrag.attachedMesh = mesh;
+            if(this.xGizmo){
+                this.xGizmo.attachedMesh = mesh;
+                this.yGizmo.attachedMesh = mesh;
+                this.zGizmo.attachedMesh = mesh;
             }
         }
         /**
@@ -20,30 +29,30 @@ module BABYLON {
          */
         constructor(gizmoLayer:UtilityLayerRenderer=UtilityLayerRenderer.DefaultUtilityLayer){
             super(gizmoLayer);
-            this._xDrag = new AxisScaleGizmo(new Vector3(1,0,0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
-            this._yDrag = new AxisScaleGizmo(new Vector3(0,1,0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
-            this._zDrag = new AxisScaleGizmo(new Vector3(0,0,1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
+            this.xGizmo = new AxisScaleGizmo(new Vector3(1,0,0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
+            this.yGizmo = new AxisScaleGizmo(new Vector3(0,1,0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
+            this.zGizmo = new AxisScaleGizmo(new Vector3(0,0,1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
             this.attachedMesh = null;
         }
 
         public set updateGizmoRotationToMatchAttachedMesh(value:boolean){
-            if(this._xDrag){
-                this._xDrag.updateGizmoRotationToMatchAttachedMesh = value;
-                this._yDrag.updateGizmoRotationToMatchAttachedMesh = value;
-                this._zDrag.updateGizmoRotationToMatchAttachedMesh = value;
+            if(this.xGizmo){
+                this.xGizmo.updateGizmoRotationToMatchAttachedMesh = value;
+                this.yGizmo.updateGizmoRotationToMatchAttachedMesh = value;
+                this.zGizmo.updateGizmoRotationToMatchAttachedMesh = value;
             }
         }
         public get updateGizmoRotationToMatchAttachedMesh(){
-            return this._xDrag.updateGizmoRotationToMatchAttachedMesh;
+            return this.xGizmo.updateGizmoRotationToMatchAttachedMesh;
         }
 
         /**
          * Disposes of the gizmo
          */
         public dispose(){
-            this._xDrag.dispose();
-            this._yDrag.dispose();
-            this._zDrag.dispose();
+            this.xGizmo.dispose();
+            this.yGizmo.dispose();
+            this.zGizmo.dispose();
         }
     }
 }