Merge pull request #5268 from TrevorDev/relayDragEvents

relay drag events

dist/preview release/what's new.md

@@ -20,7 +20,7 @@
   - Add uniform scaling drag support to the scale gizmo ([TrevorDev](https://github.com/TrevorDev))
   - Support interacting with child elements ([TrevorDev](https://github.com/TrevorDev))
   - BoundingBox gizmo support for including/excluding descendants when computing the bounding box ([TrevorDev](https://github.com/TrevorDev))
-  - Drag start and stop events for bounding box drag and uniform scale drag ([TrevorDev](https://github.com/TrevorDev))
+  - Drag start and stop events for all gizmos ([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))
   - Improved CPU particles rendering performance (up to x2 on low end devices)

src/Gizmos/babylon.positionGizmo.ts

@@ -16,6 +16,11 @@ module BABYLON {
          */
         public zGizmo: AxisDragGizmo;
 
+        /** Fires an event when any of it's sub gizmos are dragged */
+        public onDragStartObservable = new Observable();
+        /** Fires an event when any of it's sub gizmos are released from dragging */
+        public onDragEndObservable = new Observable();
+
         public set attachedMesh(mesh: Nullable<AbstractMesh>) {
             if (this.xGizmo) {
                 this.xGizmo.attachedMesh = mesh;
@@ -23,7 +28,7 @@ module BABYLON {
                 this.zGizmo.attachedMesh = mesh;
             }
         }
-    /**
+        /**
          * Creates a PositionGizmo
          * @param gizmoLayer The utility layer the gizmo will be added to
          */
@@ -32,6 +37,17 @@ module BABYLON {
             this.xGizmo = new AxisDragGizmo(new Vector3(1, 0, 0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
             this.yGizmo = new AxisDragGizmo(new Vector3(0, 1, 0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
             this.zGizmo = new AxisDragGizmo(new Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
+
+            // Relay drag events
+            [this.xGizmo, this.yGizmo, this.zGizmo].forEach((gizmo)=>{
+                gizmo.dragBehavior.onDragStartObservable.add(()=>{
+                    this.onDragStartObservable.notifyObservers({});
+                });
+                gizmo.dragBehavior.onDragEndObservable.add(()=>{
+                    this.onDragEndObservable.notifyObservers({});
+                });
+            });
+
             this.attachedMesh = null;
         }
 
@@ -81,6 +97,8 @@ module BABYLON {
             this.xGizmo.dispose();
             this.yGizmo.dispose();
             this.zGizmo.dispose();
+            this.onDragStartObservable.clear();
+            this.onDragEndObservable.clear();
         }
 
         /**

src/Gizmos/babylon.rotationGizmo.ts

@@ -16,6 +16,11 @@ module BABYLON {
          */
         public zGizmo: PlaneRotationGizmo;
 
+        /** Fires an event when any of it's sub gizmos are dragged */
+        public onDragStartObservable = new Observable();
+        /** Fires an event when any of it's sub gizmos are released from dragging */
+        public onDragEndObservable = new Observable();
+
         public set attachedMesh(mesh: Nullable<AbstractMesh>) {
             if (this.xGizmo) {
                 this.xGizmo.attachedMesh = mesh;
@@ -33,6 +38,17 @@ module BABYLON {
             this.xGizmo = new PlaneRotationGizmo(new Vector3(1, 0, 0), BABYLON.Color3.Red().scale(0.5), gizmoLayer, tessellation);
             this.yGizmo = new PlaneRotationGizmo(new Vector3(0, 1, 0), BABYLON.Color3.Green().scale(0.5), gizmoLayer, tessellation);
             this.zGizmo = new PlaneRotationGizmo(new Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer, tessellation);
+
+            // Relay drag events
+            [this.xGizmo, this.yGizmo, this.zGizmo].forEach((gizmo)=>{
+                gizmo.dragBehavior.onDragStartObservable.add(()=>{
+                    this.onDragStartObservable.notifyObservers({});
+                });
+                gizmo.dragBehavior.onDragEndObservable.add(()=>{
+                    this.onDragEndObservable.notifyObservers({});
+                });
+            });
+
             this.attachedMesh = null;
         }
 
@@ -82,6 +98,8 @@ module BABYLON {
             this.xGizmo.dispose();
             this.yGizmo.dispose();
             this.zGizmo.dispose();
+            this.onDragStartObservable.clear();
+            this.onDragEndObservable.clear();
         }
 
         /**

src/Gizmos/babylon.scaleGizmo.ts

@@ -21,6 +21,11 @@ module BABYLON {
          */
         public uniformScaleGizmo: AxisScaleGizmo;
 
+        /** Fires an event when any of it's sub gizmos are dragged */
+        public onDragStartObservable = new Observable();
+        /** Fires an event when any of it's sub gizmos are released from dragging */
+        public onDragEndObservable = new Observable();
+
         public set attachedMesh(mesh: Nullable<AbstractMesh>) {
             if (this.xGizmo) {
                 this.xGizmo.attachedMesh = mesh;
@@ -51,6 +56,16 @@ module BABYLON {
             uniformScalingMesh.addChild(octahedron);
             this.uniformScaleGizmo.setCustomMesh(uniformScalingMesh, true);
 
+            // Relay drag events
+            [this.xGizmo, this.yGizmo, this.zGizmo, this.uniformScaleGizmo].forEach((gizmo)=>{
+                gizmo.dragBehavior.onDragStartObservable.add(()=>{
+                    this.onDragStartObservable.notifyObservers({});
+                });
+                gizmo.dragBehavior.onDragEndObservable.add(()=>{
+                    this.onDragEndObservable.notifyObservers({});
+                });
+            });
+
             this.attachedMesh = null;
         }
 
@@ -106,6 +121,8 @@ module BABYLON {
             this.yGizmo.dispose();
             this.zGizmo.dispose();
             this.uniformScaleGizmo.dispose();
+            this.onDragStartObservable.clear();
+            this.onDragEndObservable.clear();
         }
     }
 }