gui picking

inspector/src/Inspector.ts

@@ -8,7 +8,7 @@ import { EmbedHostComponent } from "./components/embedHost/embedHostComponent";
 import { PropertyChangedEvent } from "./components/propertyChangedEvent";
 import { GlobalState } from "./components/globalState";
 import { IGLTFLoaderExtension } from "babylonjs-gltf2interface";
-import {GLTFFileLoader} from "babylonjs-loaders"
+import { GLTFFileLoader } from "babylonjs-loaders"
 
 interface IInternalInspectorOptions extends IInspectorOptions {
     popup: boolean;
@@ -307,10 +307,10 @@ export class Inspector {
             this._GlobalState.onPluginActivatedObserver = BABYLON.SceneLoader.OnPluginActivatedObservable.add((loader: GLTFFileLoader) => {
                 if (loader.name === "gltf") {
                     this._GlobalState.prepareGLTFPlugin(loader);
-    
+
                     loader.onValidatedObservable.add((results: IGLTFValidationResults) => {
                         this._GlobalState.validationResults = results;
-    
+
                         this._GlobalState.onValidationResultsUpdatedObservable.notifyObservers(results);
                     });
 

inspector/src/components/actionTabs/tabs/tools/gltfComponent.tsx

@@ -12,14 +12,17 @@ interface IGLTFComponentProps {
 export class GLTFComponent extends React.Component<IGLTFComponentProps> {
     constructor(props: IGLTFComponentProps) {
         super(props);
-    }   
+
+        const extensionStates = this.props.globalState.glTFLoaderDefaults;
+        extensionStates["MSFT_lod"] = extensionStates["MSFT_lod"] || { isEnabled: true };
+    }
 
     render() {
         const extensionStates = this.props.globalState.glTFLoaderDefaults;
         return (
             <div>
                 <LineContainerComponent title="GLTF EXTENSIONS">
-                    <CheckBoxLineComponent label="MSFT_lod" isSelected={() => extensionStates["MSFT_lod"].isEnabled} onSelect={value => extensionStates["MSFT_lod"].isEnabled = value}/>
+                    <CheckBoxLineComponent label="MSFT_lod" isSelected={() => extensionStates["MSFT_lod"].isEnabled} onSelect={value => extensionStates["MSFT_lod"].isEnabled = value} />
                 </LineContainerComponent>
                 <LineContainerComponent title="GLTF VALIDATION RESULTS">
                 </LineContainerComponent>

inspector/src/components/globalState.ts

@@ -1,17 +1,17 @@
 import { Observable, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Observer, Nullable } from "babylonjs";
 import { PropertyChangedEvent } from "./propertyChangedEvent";
-import {IGLTFLoaderExtension, GLTFFileLoader} from "babylonjs-loaders"
+import { IGLTFLoaderExtension, GLTFFileLoader } from "babylonjs-loaders"
 
 export class GlobalState {
     public onSelectionChangeObservable: Observable<string>;
     public onPropertyChangedObservable: Observable<PropertyChangedEvent>;
     public onPluginActivatedObserver: Nullable<Observer<ISceneLoaderPlugin | ISceneLoaderPluginAsync>>;
-    
+
     public validationResults: IGLTFValidationResults;
     public onValidationResultsUpdatedObservable = new Observable<IGLTFValidationResults>();
 
     public onExtensionLoadedObservable: Observable<IGLTFLoaderExtension>;
-    public glTFLoaderDefaults: {[name: string]: {[key: string]: any}} = {};
+    public glTFLoaderDefaults: { [name: string]: { [key: string]: any } } = {};
 
     public prepareGLTFPlugin(loader: GLTFFileLoader) {
         loader.onExtensionLoadedObservable.add((extension: IGLTFLoaderExtension) => {

inspector/src/components/sceneExplorer/entities/gui/advancedDynamicTextureTreeItemComponent.tsx

@@ -1,18 +1,21 @@
 import { faImage, faCrosshairs } from '@fortawesome/free-solid-svg-icons';
-import { IExplorerExtensibilityGroup } from "babylonjs";
+import { IExplorerExtensibilityGroup, Nullable, Observer, Observable } from "babylonjs";
 import { TreeItemLabelComponent } from "../../treeItemLabelComponent";
 import { ExtensionsComponent } from "../../extensionsComponent";
 import * as React from 'react';
-import { AdvancedDynamicTexture } from 'babylonjs-gui';
+import { AdvancedDynamicTexture, Control } from 'babylonjs-gui';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface IAdvancedDynamicTextureTreeItemComponentProps {
     texture: AdvancedDynamicTexture,
     extensibilityGroups?: IExplorerExtensibilityGroup[],
+    onSelectionChangeObservable?: Observable<any>,
     onClick: () => void
 }
 
 export class AdvancedDynamicTextureTreeItemComponent extends React.Component<IAdvancedDynamicTextureTreeItemComponentProps, { isInPickingMode: boolean }> {
+    private _onControlPickedObserver: Nullable<Observer<Control>>;
+
     constructor(props: IAdvancedDynamicTextureTreeItemComponentProps) {
         super(props);
 
@@ -22,8 +25,18 @@ export class AdvancedDynamicTextureTreeItemComponent extends React.Component<IAd
     onPickingMode() {
         let adt = this.props.texture;
 
+        if (this._onControlPickedObserver) {
+            adt.onControlPickedObservable.remove(this._onControlPickedObserver);
+            this._onControlPickedObserver = null;
+        }
 
         if (!this.state.isInPickingMode) {
+            this._onControlPickedObserver = adt.onControlPickedObservable.add((control) => {
+                if (!this.props.onSelectionChangeObservable) {
+                    return;
+                }
+                this.props.onSelectionChangeObservable.notifyObservers(control);
+            });
         }
 
         this.setState({ isInPickingMode: !this.state.isInPickingMode });

inspector/src/components/sceneExplorer/treeItemSelectableComponent.tsx

@@ -123,10 +123,12 @@ export class TreeItemSelectableComponent extends React.Component<ITreeItemSelect
                     return null;
                 }
 
-                if (entity.getDescendants(false, (n: Node) => {
-                    !this.props.filter || n.name.indexOf(this.props.filter) !== -1
-                }).length === 0) {
-                    return null;
+                if (entity.getDescendants) {
+                    if (entity.getDescendants(false, (n: Node) => {
+                        !this.props.filter || n.name.indexOf(this.props.filter) !== -1
+                    }).length === 0) {
+                        return null;
+                    }
                 }
             }
         }
@@ -140,7 +142,7 @@ export class TreeItemSelectableComponent extends React.Component<ITreeItemSelect
                             {chevron}
                         </div>
                     }
-                    <TreeItemSpecializedComponent extensibilityGroups={this.props.extensibilityGroups} label={entity.name} entity={entity} onClick={() => this.onSelect()} />
+                    <TreeItemSpecializedComponent extensibilityGroups={this.props.extensibilityGroups} label={entity.name} entity={entity} onClick={() => this.onSelect()} onSelectionChangeObservable={this.props.onSelectionChangeObservable} />
                 </div>
                 {
                     this.renderChildren()

inspector/src/components/sceneExplorer/treeItemSpecializedComponent.tsx

@@ -1,4 +1,4 @@
-import { AbstractMesh, Camera, Light, Material, Texture, TransformNode, IExplorerExtensibilityGroup } from "babylonjs";
+import { AbstractMesh, Camera, Light, Material, Texture, TransformNode, IExplorerExtensibilityGroup, Observable } from "babylonjs";
 import { MeshTreeItemComponent } from "./entities/meshTreeItemComponent";
 import { CameraTreeItemComponent } from "./entities/cameraTreeItemComponent";
 import { LightTreeItemComponent } from "./entities/lightTreeItemComponent";
@@ -16,6 +16,7 @@ interface ITreeItemSpecializedComponentProps {
     label: string,
     entity?: any,
     extensibilityGroups?: IExplorerExtensibilityGroup[],
+    onSelectionChangeObservable?: Observable<any>,
     onClick?: () => void
 }
 
@@ -64,7 +65,7 @@ export class TreeItemSpecializedComponent extends React.Component<ITreeItemSpeci
             }
 
             if (className === "AdvancedDynamicTexture") {
-                return (<AdvancedDynamicTextureTreeItemComponent extensibilityGroups={this.props.extensibilityGroups} texture={entity as AdvancedDynamicTexture} onClick={() => this.onClick()} />);
+                return (<AdvancedDynamicTextureTreeItemComponent onSelectionChangeObservable={this.props.onSelectionChangeObservable} extensibilityGroups={this.props.extensibilityGroups} texture={entity as AdvancedDynamicTexture} onClick={() => this.onClick()} />);
             }
 
             if (className.indexOf("Texture") !== -1) {

inspector/src/tools.ts

@@ -4,8 +4,9 @@ export class Tools {
             return true;
         }
 
-        if (item.getChildren) {
-            for (var child of item.getChildren()) {
+        const children = item.getChildren ? item.getChildren() : item.children;
+        if (children) {
+            for (var child of children) {
                 if (Tools.LookForItem(child, selectedEntity)) {
                     return true;
                 }