Fix inspector Ui for lights

Playground/babylon.d.txt

@@ -8663,7 +8663,7 @@ declare module BABYLON {
         getAbsolutePosition(): Vector3;
         /**
          * Sets the ShadowLight direction toward the passed target.
-         * @param target The point tot target in local space
+         * @param target The point to target in local space
          * @returns the updated ShadowLight direction
          */
         setDirectionToTarget(target: Vector3): Vector3;
@@ -38809,8 +38809,7 @@ declare module BABYLON {
         gizmoLayer: UtilityLayerRenderer;
         /**
          * The root mesh of the gizmo
-         */
-        protected _rootMesh: Mesh;
+         */
rootMesh: Mesh;
         private _attachedMesh;
         /**
          * Ratio for the scale of the gizmo (Default: 1)
@@ -40821,6 +40820,29 @@ declare module BABYLON {
     }
 }
 declare module BABYLON {
+    /**
+     * Gizmo that enables viewing a light
+     */
+    export class LightGizmo extends Gizmo {
+        private _box;
+        /**
+         * Creates a LightGizmo
+         * @param gizmoLayer The utility layer the gizmo will be added to
+         */
+        constructor(gizmoLayer?: UtilityLayerRenderer);
+        private _light;
+        /**
+         * The light that the gizmo is attached to
+         */
+        light: Nullable<Light>;
+        /**
+         * @hidden
+         * Updates the gizmo to match the attached mesh's position/rotation
+         */
+        protected _update(): void;
+    }
+}
+declare module BABYLON {
     /** @hidden */
     export var backgroundFragmentDeclaration: {
         name: string;

dist/preview release/babylon.d.ts

@@ -8775,7 +8775,7 @@ declare module BABYLON {
         getAbsolutePosition(): Vector3;
         /**
          * Sets the ShadowLight direction toward the passed target.
-         * @param target The point tot target in local space
+         * @param target The point to target in local space
          * @returns the updated ShadowLight direction
          */
         setDirectionToTarget(target: Vector3): Vector3;
@@ -39421,7 +39421,7 @@ declare module BABYLON {
         /**
          * The root mesh of the gizmo
          */
-        protected _rootMesh: Mesh;
+        _rootMesh: Mesh;
         private _attachedMesh;
         /**
          * Ratio for the scale of the gizmo (Default: 1)
@@ -41454,6 +41454,29 @@ declare module BABYLON {
     }
 }
 declare module BABYLON {
+    /**
+     * Gizmo that enables viewing a light
+     */
+    export class LightGizmo extends Gizmo {
+        private _box;
+        /**
+         * Creates a LightGizmo
+         * @param gizmoLayer The utility layer the gizmo will be added to
+         */
+        constructor(gizmoLayer?: UtilityLayerRenderer);
+        private _light;
+        /**
+         * The light that the gizmo is attached to
+         */
+        light: Nullable<Light>;
+        /**
+         * @hidden
+         * Updates the gizmo to match the attached mesh's position/rotation
+         */
+        protected _update(): void;
+    }
+}
+declare module BABYLON {
     /** @hidden */
     export var backgroundFragmentDeclaration: {
         name: string;

dist/preview release/babylon.module.d.ts

@@ -8866,7 +8866,7 @@ declare module "babylonjs/Lights/shadowLight" {
         getAbsolutePosition(): Vector3;
         /**
          * Sets the ShadowLight direction toward the passed target.
-         * @param target The point tot target in local space
+         * @param target The point to target in local space
          * @returns the updated ShadowLight direction
          */
         setDirectionToTarget(target: Vector3): Vector3;
@@ -40766,7 +40766,7 @@ declare module "babylonjs/Gizmos/gizmo" {
         /**
          * The root mesh of the gizmo
          */
-        protected _rootMesh: Mesh;
+        _rootMesh: Mesh;
         private _attachedMesh;
         /**
          * Ratio for the scale of the gizmo (Default: 1)
@@ -43002,6 +43002,33 @@ declare module "babylonjs/Gizmos/gizmoManager" {
         dispose(): void;
     }
 }
+declare module "babylonjs/Gizmos/lightGizmo" {
+    import { Nullable } from "babylonjs/types";
+    import { Gizmo } from "babylonjs/Gizmos/gizmo";
+    import { UtilityLayerRenderer } from "babylonjs/Rendering/utilityLayerRenderer";
+    import { Light } from "babylonjs/Lights/light";
+    /**
+     * Gizmo that enables viewing a light
+     */
+    export class LightGizmo extends Gizmo {
+        private _box;
+        /**
+         * Creates a LightGizmo
+         * @param gizmoLayer The utility layer the gizmo will be added to
+         */
+        constructor(gizmoLayer?: UtilityLayerRenderer);
+        private _light;
+        /**
+         * The light that the gizmo is attached to
+         */
+        light: Nullable<Light>;
+        /**
+         * @hidden
+         * Updates the gizmo to match the attached mesh's position/rotation
+         */
+        protected _update(): void;
+    }
+}
 declare module "babylonjs/Gizmos/index" {
     export * from "babylonjs/Gizmos/axisDragGizmo";
     export * from "babylonjs/Gizmos/axisScaleGizmo";
@@ -43012,6 +43039,7 @@ declare module "babylonjs/Gizmos/index" {
     export * from "babylonjs/Gizmos/positionGizmo";
     export * from "babylonjs/Gizmos/rotationGizmo";
     export * from "babylonjs/Gizmos/scaleGizmo";
+    export * from "babylonjs/Gizmos/lightGizmo";
 }
 declare module "babylonjs/Shaders/ShadersInclude/backgroundFragmentDeclaration" {
     /** @hidden */
@@ -65295,7 +65323,7 @@ declare module BABYLON {
         getAbsolutePosition(): Vector3;
         /**
          * Sets the ShadowLight direction toward the passed target.
-         * @param target The point tot target in local space
+         * @param target The point to target in local space
          * @returns the updated ShadowLight direction
          */
         setDirectionToTarget(target: Vector3): Vector3;
@@ -95941,7 +95969,7 @@ declare module BABYLON {
         /**
          * The root mesh of the gizmo
          */
-        protected _rootMesh: Mesh;
+        _rootMesh: Mesh;
         private _attachedMesh;
         /**
          * Ratio for the scale of the gizmo (Default: 1)
@@ -97974,6 +98002,29 @@ declare module BABYLON {
     }
 }
 declare module BABYLON {
+    /**
+     * Gizmo that enables viewing a light
+     */
+    export class LightGizmo extends Gizmo {
+        private _box;
+        /**
+         * Creates a LightGizmo
+         * @param gizmoLayer The utility layer the gizmo will be added to
+         */
+        constructor(gizmoLayer?: UtilityLayerRenderer);
+        private _light;
+        /**
+         * The light that the gizmo is attached to
+         */
+        light: Nullable<Light>;
+        /**
+         * @hidden
+         * Updates the gizmo to match the attached mesh's position/rotation
+         */
+        protected _update(): void;
+    }
+}
+declare module BABYLON {
     /** @hidden */
     export var backgroundFragmentDeclaration: {
         name: string;

dist/preview release/gui/babylon.gui.js

@@ -4773,7 +4773,20 @@ var Control = /** @class */ (function () {
             // get the boudning box of the current measure and last frames measure in global space and invalidate it
             // the previous measure is used to properly clear a control that is scaled down
             _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].CombineToRef(this._tmpMeasureA, this._prevCurrentMeasureTransformedIntoGlobalSpace, this._tmpMeasureA);
-            this.host.invalidateRect(Math.floor(this._tmpMeasureA.left), Math.floor(this._tmpMeasureA.top), Math.ceil(this._tmpMeasureA.left + this._tmpMeasureA.width), Math.ceil(this._tmpMeasureA.top + this._tmpMeasureA.height));
+            if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+                // Expand rect based on shadows
+                var shadowOffsetX = this.shadowOffsetX;
+                var shadowOffsetY = this.shadowOffsetY;
+                var shadowBlur = this.shadowBlur;
+                var leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
+                var rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur * 2, 0);
+                var topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
+                var bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
+                this.host.invalidateRect(Math.floor(this._tmpMeasureA.left + leftShadowOffset), Math.floor(this._tmpMeasureA.top + topShadowOffset), Math.ceil(this._tmpMeasureA.left + this._tmpMeasureA.width + rightShadowOffset), Math.ceil(this._tmpMeasureA.top + this._tmpMeasureA.height + bottomShadowOffset));
+            }
+            else {
+                this.host.invalidateRect(Math.floor(this._tmpMeasureA.left), Math.floor(this._tmpMeasureA.top), Math.ceil(this._tmpMeasureA.left + this._tmpMeasureA.width), Math.ceil(this._tmpMeasureA.top + this._tmpMeasureA.height));
+            }
         }
     };
     /** @hidden */

dist/preview release/inspector/babylon.inspector.d.ts

@@ -27,6 +27,8 @@ declare module INSPECTOR {
         };
         blockMutationUpdates: boolean;
         prepareGLTFPlugin(loader: BABYLON.GLTFFileLoader): void;
+        lightGizmos: Array<BABYLON.LightGizmo>;
+        enableLightGizmo(light: BABYLON.Light, enable?: boolean): void;
     }
 }
 declare module INSPECTOR {
@@ -1108,9 +1110,11 @@ declare module INSPECTOR {
     }
     export class LightTreeItemComponent extends React.Component<ILightTreeItemComponentProps, {
         isEnabled: boolean;
+        isGizmoEnabled: boolean;
     }> {
         constructor(props: ILightTreeItemComponentProps);
         switchIsEnabled(): void;
+        toggleGizmo(): void;
         render(): JSX.Element;
     }
 }
@@ -1272,12 +1276,14 @@ declare module INSPECTOR {
         selectedEntity?: any;
         extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
         onSelectionChangedObservable?: BABYLON.Observable<any>;
+        globalState: GlobalState;
     }
     export class SceneTreeItemComponent extends React.Component<ISceneTreeItemComponentProps, {
         isSelected: boolean;
         isInPickingMode: boolean;
         gizmoMode: number;
     }> {
+        private _gizmoLayerOnPointerObserver;
         private _onPointerObserver;
         private _onSelectionChangeObserver;
         private _selectedEntity;

dist/preview release/inspector/babylon.inspector.module.d.ts

@@ -14,6 +14,8 @@ declare module "babylonjs-inspector/components/globalState" {
     import { Observable, Observer } from "babylonjs/Misc/observable";
     import { ISceneLoaderPlugin, ISceneLoaderPluginAsync } from "babylonjs/Loading/sceneLoader";
     import { Scene } from "babylonjs/scene";
+    import { Light } from "babylonjs/Lights/light";
+    import { LightGizmo } from "babylonjs/Gizmos/lightGizmo";
     import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
     export class GlobalState {
         onSelectionChangedObservable: Observable<string>;
@@ -34,6 +36,8 @@ declare module "babylonjs-inspector/components/globalState" {
         };
         blockMutationUpdates: boolean;
         prepareGLTFPlugin(loader: GLTFFileLoader): void;
+        lightGizmos: Array<LightGizmo>;
+        enableLightGizmo(light: Light, enable?: boolean): void;
     }
 }
 declare module "babylonjs-inspector/components/actionTabs/paneComponent" {
@@ -1382,9 +1386,11 @@ declare module "babylonjs-inspector/components/sceneExplorer/entities/lightTreeI
     }
     export class LightTreeItemComponent extends React.Component<ILightTreeItemComponentProps, {
         isEnabled: boolean;
+        isGizmoEnabled: boolean;
     }> {
         constructor(props: ILightTreeItemComponentProps);
         switchIsEnabled(): void;
+        toggleGizmo(): void;
         render(): JSX.Element;
     }
 }
@@ -1574,18 +1580,21 @@ declare module "babylonjs-inspector/components/sceneExplorer/entities/sceneTreeI
     import { IExplorerExtensibilityGroup } from "babylonjs/Debug/debugLayer";
     import { Scene } from "babylonjs/scene";
     import * as React from "react";
+    import { GlobalState } from "babylonjs-inspector/components/globalState";
     interface ISceneTreeItemComponentProps {
         scene: Scene;
         onRefresh: () => void;
         selectedEntity?: any;
         extensibilityGroups?: IExplorerExtensibilityGroup[];
         onSelectionChangedObservable?: Observable<any>;
+        globalState: GlobalState;
     }
     export class SceneTreeItemComponent extends React.Component<ISceneTreeItemComponentProps, {
         isSelected: boolean;
         isInPickingMode: boolean;
         gizmoMode: number;
     }> {
+        private _gizmoLayerOnPointerObserver;
         private _onPointerObserver;
         private _onSelectionChangeObserver;
         private _selectedEntity;
@@ -1777,6 +1786,8 @@ declare module INSPECTOR {
         };
         blockMutationUpdates: boolean;
         prepareGLTFPlugin(loader: BABYLON.GLTFFileLoader): void;
+        lightGizmos: Array<BABYLON.LightGizmo>;
+        enableLightGizmo(light: BABYLON.Light, enable?: boolean): void;
     }
 }
 declare module INSPECTOR {
@@ -2858,9 +2869,11 @@ declare module INSPECTOR {
     }
     export class LightTreeItemComponent extends React.Component<ILightTreeItemComponentProps, {
         isEnabled: boolean;
+        isGizmoEnabled: boolean;
     }> {
         constructor(props: ILightTreeItemComponentProps);
         switchIsEnabled(): void;
+        toggleGizmo(): void;
         render(): JSX.Element;
     }
 }
@@ -3022,12 +3035,14 @@ declare module INSPECTOR {
         selectedEntity?: any;
         extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
         onSelectionChangedObservable?: BABYLON.Observable<any>;
+        globalState: GlobalState;
     }
     export class SceneTreeItemComponent extends React.Component<ISceneTreeItemComponentProps, {
         isSelected: boolean;
         isInPickingMode: boolean;
         gizmoMode: number;
     }> {
+        private _gizmoLayerOnPointerObserver;
         private _onPointerObserver;
         private _onSelectionChangeObserver;
         private _selectedEntity;

dist/preview release/viewer/babylon.module.d.ts

@@ -8866,7 +8866,7 @@ declare module "babylonjs/Lights/shadowLight" {
         getAbsolutePosition(): Vector3;
         /**
          * Sets the ShadowLight direction toward the passed target.
-         * @param target The point tot target in local space
+         * @param target The point to target in local space
          * @returns the updated ShadowLight direction
          */
         setDirectionToTarget(target: Vector3): Vector3;
@@ -40766,7 +40766,7 @@ declare module "babylonjs/Gizmos/gizmo" {
         /**
          * The root mesh of the gizmo
          */
-        protected _rootMesh: Mesh;
+        _rootMesh: Mesh;
         private _attachedMesh;
         /**
          * Ratio for the scale of the gizmo (Default: 1)
@@ -43002,6 +43002,33 @@ declare module "babylonjs/Gizmos/gizmoManager" {
         dispose(): void;
     }
 }
+declare module "babylonjs/Gizmos/lightGizmo" {
+    import { Nullable } from "babylonjs/types";
+    import { Gizmo } from "babylonjs/Gizmos/gizmo";
+    import { UtilityLayerRenderer } from "babylonjs/Rendering/utilityLayerRenderer";
+    import { Light } from "babylonjs/Lights/light";
+    /**
+     * Gizmo that enables viewing a light
+     */
+    export class LightGizmo extends Gizmo {
+        private _box;
+        /**
+         * Creates a LightGizmo
+         * @param gizmoLayer The utility layer the gizmo will be added to
+         */
+        constructor(gizmoLayer?: UtilityLayerRenderer);
+        private _light;
+        /**
+         * The light that the gizmo is attached to
+         */
+        light: Nullable<Light>;
+        /**
+         * @hidden
+         * Updates the gizmo to match the attached mesh's position/rotation
+         */
+        protected _update(): void;
+    }
+}
 declare module "babylonjs/Gizmos/index" {
     export * from "babylonjs/Gizmos/axisDragGizmo";
     export * from "babylonjs/Gizmos/axisScaleGizmo";
@@ -43012,6 +43039,7 @@ declare module "babylonjs/Gizmos/index" {
     export * from "babylonjs/Gizmos/positionGizmo";
     export * from "babylonjs/Gizmos/rotationGizmo";
     export * from "babylonjs/Gizmos/scaleGizmo";
+    export * from "babylonjs/Gizmos/lightGizmo";
 }
 declare module "babylonjs/Shaders/ShadersInclude/backgroundFragmentDeclaration" {
     /** @hidden */
@@ -65295,7 +65323,7 @@ declare module BABYLON {
         getAbsolutePosition(): Vector3;
         /**
          * Sets the ShadowLight direction toward the passed target.
-         * @param target The point tot target in local space
+         * @param target The point to target in local space
          * @returns the updated ShadowLight direction
          */
         setDirectionToTarget(target: Vector3): Vector3;
@@ -95941,7 +95969,7 @@ declare module BABYLON {
         /**
          * The root mesh of the gizmo
          */
-        protected _rootMesh: Mesh;
+        _rootMesh: Mesh;
         private _attachedMesh;
         /**
          * Ratio for the scale of the gizmo (Default: 1)
@@ -97974,6 +98002,29 @@ declare module BABYLON {
     }
 }
 declare module BABYLON {
+    /**
+     * Gizmo that enables viewing a light
+     */
+    export class LightGizmo extends Gizmo {
+        private _box;
+        /**
+         * Creates a LightGizmo
+         * @param gizmoLayer The utility layer the gizmo will be added to
+         */
+        constructor(gizmoLayer?: UtilityLayerRenderer);
+        private _light;
+        /**
+         * The light that the gizmo is attached to
+         */
+        light: Nullable<Light>;
+        /**
+         * @hidden
+         * Updates the gizmo to match the attached mesh's position/rotation
+         */
+        protected _update(): void;
+    }
+}
+declare module BABYLON {
     /** @hidden */
     export var backgroundFragmentDeclaration: {
         name: string;

inspector/src/components/globalState.ts

@@ -54,21 +54,21 @@ export class GlobalState {
     }
 
     // Light gizmos
-    public lightGizmos:Array<LightGizmo> = [];
-    public enableLightGizmo(light:Light, enable = true){
-        if(enable){
-            if(!light.reservedDataStore){
+    public lightGizmos: Array<LightGizmo> = [];
+    public enableLightGizmo(light: Light, enable = true) {
+        if (enable) {
+            if (!light.reservedDataStore) {
                 light.reservedDataStore = {}
             }
-            if(!light.reservedDataStore.lightGizmo){
+            if (!light.reservedDataStore.lightGizmo) {
                 light.reservedDataStore.lightGizmo = new LightGizmo();
                 this.lightGizmos.push(light.reservedDataStore.lightGizmo)
                 light.reservedDataStore.lightGizmo.light = light;
             }
-        }else if(light.reservedDataStore && light.reservedDataStore.lightGizmo){
-            this.lightGizmos.splice(this.lightGizmos.indexOf(light.reservedDataStore.lightGizmo),1);
+        } else if (light.reservedDataStore && light.reservedDataStore.lightGizmo) {
+            this.lightGizmos.splice(this.lightGizmos.indexOf(light.reservedDataStore.lightGizmo), 1);
             light.reservedDataStore.lightGizmo.dispose();
-            light.reservedDataStore.lightGizmo=null;
+            light.reservedDataStore.lightGizmo = null;
         }
     }
 }

inspector/src/components/sceneExplorer/sceneExplorer.scss

@@ -373,7 +373,7 @@
         .lightTools {
             grid-column: 2;
             display: grid;
-            grid-template-columns: 1fr 20px auto 5px;
+            grid-template-columns: 1fr 20px 20px auto 5px;
             align-items: center;
 
             .enableLight {

src/Gizmos/lightGizmo.ts

@@ -24,7 +24,7 @@ export class LightGizmo extends Gizmo {
         this._box.rotation.x = -Math.PI / 2;
         this._box.bakeCurrentTransformIntoVertices();
         this._box.material = new StandardMaterial("", this.gizmoLayer.utilityLayerScene);
-        (this._box.material as StandardMaterial).emissiveColor = new Color3(1, 1, 1);
+        (this._box.material as StandardMaterial).emissiveColor = Color3.Yellow();
         this._rootMesh.addChild(this._box);
         this.attachedMesh = new AbstractMesh("", this.gizmoLayer.utilityLayerScene);
     }
@@ -36,7 +36,7 @@ export class LightGizmo extends Gizmo {
     public set light(light: Nullable<Light>) {
         this._light = light;
         if ((light as any).position) {
-        this.attachedMesh!.position.copyFrom((light as any).position);
+            this.attachedMesh!.position.copyFrom((light as any).position);
         }
         if ((light as any).direction) {
             this._box.setDirection((light as any).direction);
@@ -63,7 +63,7 @@ export class LightGizmo extends Gizmo {
         }
         if (!this._light.isEnabled()) {
             (this._box.material as StandardMaterial).emissiveColor.set(0, 0, 0);
-        }else {
+        } else {
             (this._box.material as StandardMaterial).emissiveColor.set(1, 1, 1);
         }
     }