Merge pull request #6306 from TrevorDev/recordGizmoMovement

Record gizmo movement and get qr codes to work in dark mode

Playground/index-local.html

@@ -100,7 +100,7 @@
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
                         <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
                 </div>

Playground/index.html

@@ -118,7 +118,7 @@
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
                         <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
                 </div>

Playground/indexStable.html

@@ -210,7 +210,7 @@
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
                         <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
                 </div>

Playground/js/index.js

@@ -850,7 +850,9 @@ function showError(errorMessage, errorEvent) {
 
         showQRCode = function() {
             $("#qrCodeImage").empty();
-            $("#qrCodeImage").qrcode({text: window.location.href});
+            var playgroundCode = window.location.href.split("#");
+            playgroundCode.shift();
+            $("#qrCodeImage").qrcode({text: "https://playground.babylonjs.com/frame.html#"+(playgroundCode.join("#"))});
         };
 
         // Fullscreen

Playground/ts.html

@@ -391,7 +391,7 @@
                         <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
                             <i class="fa fa-chevron-right" aria-hidden="true"></i>
                             <div class="toDisplaySub">
-                                <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                                <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>
                             </div>
                         </div>
                     </div>

inspector/src/components/sceneExplorer/entities/sceneTreeItemComponent.tsx

@@ -12,6 +12,8 @@ import * as React from "react";
 
 import { GlobalState } from "../../globalState";
 import { UtilityLayerRenderer } from "babylonjs/Rendering/utilityLayerRenderer";
+import { PropertyChangedEvent } from '../../../components/propertyChangedEvent';
+import { LightGizmo } from 'babylonjs/Gizmos/lightGizmo';
 
 interface ISceneTreeItemComponentProps {
     scene: Scene;
@@ -28,6 +30,10 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
     private _onSelectionChangeObserver: Nullable<Observer<any>>;
     private _selectedEntity: any;
 
+    private _posDragEnd: Nullable<Observer<PropertyChangedEvent>> = null;
+    private _scaleDragEnd: Nullable<Observer<PropertyChangedEvent>> = null;
+    private _rotateDragEnd: Nullable<Observer<PropertyChangedEvent>> = null;
+
     constructor(props: ISceneTreeItemComponentProps) {
         super(props);
 
@@ -203,12 +209,78 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
             switch (mode) {
                 case 1:
                     manager.positionGizmoEnabled = true;
+                    if(!this._posDragEnd){
+                        // Record movement for generating replay code
+                        this._posDragEnd = manager.gizmos.positionGizmo!.onDragEndObservable.add(()=>{
+                            if (manager.gizmos.positionGizmo && manager.gizmos.positionGizmo.attachedMesh) {
+                                var lightGizmo:Nullable<LightGizmo> =  manager.gizmos.positionGizmo.attachedMesh.reservedDataStore.lightGizmo;
+                                var obj:any = (lightGizmo && lightGizmo.light) ? lightGizmo.light : manager.gizmos.positionGizmo.attachedMesh;
+                                
+                                if (obj.position) {
+                                    var e = new PropertyChangedEvent();
+                                    e.object = obj
+                                    e.property = "position"
+                                    e.value = obj.position;
+                                    this.props.globalState.onPropertyChangedObservable.notifyObservers(e)
+                                }
+                            }                            
+                        })
+                    }
+                    
                     break;
                 case 2:
                     manager.rotationGizmoEnabled = true;
+                    if(!this._rotateDragEnd){
+                        // Record movement for generating replay code
+                        this._rotateDragEnd = manager.gizmos.rotationGizmo!.onDragEndObservable.add(()=>{
+                            if (manager.gizmos.rotationGizmo && manager.gizmos.rotationGizmo.attachedMesh) {
+                                var lightGizmo:Nullable<LightGizmo> =  manager.gizmos.rotationGizmo.attachedMesh.reservedDataStore.lightGizmo;
+                                var obj:any = (lightGizmo && lightGizmo.light) ? lightGizmo.light : manager.gizmos.rotationGizmo.attachedMesh;
+                                
+                                if (obj.rotationQuaternion) {
+                                    var e = new PropertyChangedEvent();
+                                    e.object = obj;
+                                    e.property = "rotationQuaternion";
+                                    e.value = obj.rotationQuaternion;
+                                    this.props.globalState.onPropertyChangedObservable.notifyObservers(e);
+                                } else if(obj.rotation) {
+                                    var e = new PropertyChangedEvent();
+                                    e.object = obj;
+                                    e.property = "rotation";
+                                    e.value = obj.rotation;
+                                    this.props.globalState.onPropertyChangedObservable.notifyObservers(e);
+                                } else if(obj.direction) {
+                                    var e = new PropertyChangedEvent();
+                                    e.object = obj;
+                                    e.property = "direction";
+                                    e.value = obj.direction;
+                                    this.props.globalState.onPropertyChangedObservable.notifyObservers(e);
+                                }
+                            }                            
+                        })
+                    }
+
                     break;
                 case 3:
                     manager.scaleGizmoEnabled = true;
+                    if(!this._scaleDragEnd){
+                        // Record movement for generating replay code
+                        this._scaleDragEnd = manager.gizmos.scaleGizmo!.onDragEndObservable.add(()=>{
+                            if (manager.gizmos.scaleGizmo && manager.gizmos.scaleGizmo.attachedMesh) {
+                                var lightGizmo:Nullable<LightGizmo> =  manager.gizmos.scaleGizmo.attachedMesh.reservedDataStore.lightGizmo;
+                                var obj:any = (lightGizmo && lightGizmo.light) ? lightGizmo.light : manager.gizmos.scaleGizmo.attachedMesh;
+                                
+                                if (obj.scaling) {
+                                    var e = new PropertyChangedEvent();
+                                    e.object = obj;
+                                    e.property = "scaling";
+                                    e.value = obj.scaling;
+                                    this.props.globalState.onPropertyChangedObservable.notifyObservers(e);
+                                }
+                            }                            
+                        })
+                    }
+
                     break;
                 case 4:
                     manager.boundingBoxGizmoEnabled = true;

src/Gizmos/lightGizmo.ts

@@ -67,6 +67,11 @@ export class LightGizmo extends Gizmo {
 
             this._lightMesh.rotationQuaternion = new Quaternion();
 
+            if (!this.attachedMesh!.reservedDataStore) {
+                this.attachedMesh!.reservedDataStore = {};
+            }
+            this.attachedMesh!.reservedDataStore.lightGizmo = this;
+
             // Get update position and direction if the light has it
             if ((light as any).position) {
                 this.attachedMesh!.position.copyFrom((light as any).position);