bottom margins!

Tools/DevLoader/BabylonLoader.js

@@ -275,10 +275,6 @@ var BABYLONDEVTOOLS;
             }
             getJson('/Tools/Gulp/config.json',
                 function(data) {
-                    if (!min) {
-                        self.loadScript('/dist/preview release/split.js');
-                    }
-
                     self.loadBJSScripts(data);
                     if (dependencies) {
                         self.loadScripts(dependencies);

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

@@ -3,37 +3,35 @@
 //   ../../../../Tools/Gulp/babylonjs
 declare module INSPECTOR {
 }
-declare module INSPECTOR {
-    export interface IExtensibilityOption {
-        label: string;
-        action: (entity: any) => void;
-    }
-    export interface IExtensibilityGroup {
-        predicate: (entity: any) => boolean;
-        entries: IExtensibilityOption[];
-    }
-    export interface IInspectorOptions {
-        overlay?: boolean;
-        sceneExplorerRoot?: HTMLElement;
-        actionTabsRoot?: HTMLElement;
-        embedHostRoot?: HTMLElement;
-        showExplorer?: boolean;
-        showInspector?: boolean;
-        explorerWidth?: string;
-        inspectorWidth?: string;
-        embedHostWidth?: string;
-        embedMode?: boolean;
-        handleResize?: boolean;
-        enablePopup?: boolean;
-        explorerExtensibility?: IExtensibilityGroup[];
-    }
-    export class Inspector {
-        static OnSelectionChangeObservable: BABYLON.Observable<string>;
-        static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-        static readonly IsVisible: boolean;
-        static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
-        static Hide(): void;
-    }
+export interface IExtensibilityOption {
+    label: string;
+    action: (entity: any) => void;
+}
+export interface IExtensibilityGroup {
+    predicate: (entity: any) => boolean;
+    entries: IExtensibilityOption[];
+}
+export interface IInspectorOptions {
+    overlay?: boolean;
+    sceneExplorerRoot?: HTMLElement;
+    actionTabsRoot?: HTMLElement;
+    embedHostRoot?: HTMLElement;
+    showExplorer?: boolean;
+    showInspector?: boolean;
+    explorerWidth?: string;
+    inspectorWidth?: string;
+    embedHostWidth?: string;
+    embedMode?: boolean;
+    handleResize?: boolean;
+    enablePopup?: boolean;
+    explorerExtensibility?: IExtensibilityGroup[];
+}
+export declare class Inspector {
+    static OnSelectionChangeObservable: BABYLON.Observable<string>;
+    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
+    static readonly IsVisible: boolean;
+    static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
+    static Hide(): void;
 }
 declare module INSPECTOR {
     export class PropertyChangedEvent {

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

@@ -6,39 +6,37 @@ declare module 'babylonjs-inspector' {
     export * from "babylonjs-inspector/inspector";
 }
 
-declare module 'babylonjs-inspector/inspector' {
-    import { Scene, Observable } from "babylonjs";
-    import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
-    export interface IExtensibilityOption {
-        label: string;
-        action: (entity: any) => void;
-    }
-    export interface IExtensibilityGroup {
-        predicate: (entity: any) => boolean;
-        entries: IExtensibilityOption[];
-    }
-    export interface IInspectorOptions {
-        overlay?: boolean;
-        sceneExplorerRoot?: HTMLElement;
-        actionTabsRoot?: HTMLElement;
-        embedHostRoot?: HTMLElement;
-        showExplorer?: boolean;
-        showInspector?: boolean;
-        explorerWidth?: string;
-        inspectorWidth?: string;
-        embedHostWidth?: string;
-        embedMode?: boolean;
-        handleResize?: boolean;
-        enablePopup?: boolean;
-        explorerExtensibility?: IExtensibilityGroup[];
-    }
-    export class Inspector {
-        static OnSelectionChangeObservable: Observable<string>;
-        static OnPropertyChangedObservable: Observable<PropertyChangedEvent>;
-        static readonly IsVisible: boolean;
-        static Show(scene: Scene, userOptions: Partial<IInspectorOptions>): void;
-        static Hide(): void;
-    }
+import { Scene, Observable } from "babylonjs";
+import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
+export interface IExtensibilityOption {
+    label: string;
+    action: (entity: any) => void;
+}
+export interface IExtensibilityGroup {
+    predicate: (entity: any) => boolean;
+    entries: IExtensibilityOption[];
+}
+export interface IInspectorOptions {
+    overlay?: boolean;
+    sceneExplorerRoot?: HTMLElement;
+    actionTabsRoot?: HTMLElement;
+    embedHostRoot?: HTMLElement;
+    showExplorer?: boolean;
+    showInspector?: boolean;
+    explorerWidth?: string;
+    inspectorWidth?: string;
+    embedHostWidth?: string;
+    embedMode?: boolean;
+    handleResize?: boolean;
+    enablePopup?: boolean;
+    explorerExtensibility?: IExtensibilityGroup[];
+}
+export declare class Inspector {
+    static OnSelectionChangeObservable: Observable<string>;
+    static OnPropertyChangedObservable: Observable<PropertyChangedEvent>;
+    static readonly IsVisible: boolean;
+    static Show(scene: Scene, userOptions: Partial<IInspectorOptions>): void;
+    static Hide(): void;
 }
 
 declare module 'babylonjs-inspector/components/propertyChangedEvent' {
@@ -56,37 +54,35 @@ declare module 'babylonjs-inspector/components/propertyChangedEvent' {
 //   ../../../../Tools/Gulp/babylonjs
 declare module INSPECTOR {
 }
-declare module INSPECTOR {
-    export interface IExtensibilityOption {
-        label: string;
-        action: (entity: any) => void;
-    }
-    export interface IExtensibilityGroup {
-        predicate: (entity: any) => boolean;
-        entries: IExtensibilityOption[];
-    }
-    export interface IInspectorOptions {
-        overlay?: boolean;
-        sceneExplorerRoot?: HTMLElement;
-        actionTabsRoot?: HTMLElement;
-        embedHostRoot?: HTMLElement;
-        showExplorer?: boolean;
-        showInspector?: boolean;
-        explorerWidth?: string;
-        inspectorWidth?: string;
-        embedHostWidth?: string;
-        embedMode?: boolean;
-        handleResize?: boolean;
-        enablePopup?: boolean;
-        explorerExtensibility?: IExtensibilityGroup[];
-    }
-    export class Inspector {
-        static OnSelectionChangeObservable: BABYLON.Observable<string>;
-        static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-        static readonly IsVisible: boolean;
-        static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
-        static Hide(): void;
-    }
+export interface IExtensibilityOption {
+    label: string;
+    action: (entity: any) => void;
+}
+export interface IExtensibilityGroup {
+    predicate: (entity: any) => boolean;
+    entries: IExtensibilityOption[];
+}
+export interface IInspectorOptions {
+    overlay?: boolean;
+    sceneExplorerRoot?: HTMLElement;
+    actionTabsRoot?: HTMLElement;
+    embedHostRoot?: HTMLElement;
+    showExplorer?: boolean;
+    showInspector?: boolean;
+    explorerWidth?: string;
+    inspectorWidth?: string;
+    embedHostWidth?: string;
+    embedMode?: boolean;
+    handleResize?: boolean;
+    enablePopup?: boolean;
+    explorerExtensibility?: IExtensibilityGroup[];
+}
+export declare class Inspector {
+    static OnSelectionChangeObservable: BABYLON.Observable<string>;
+    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
+    static readonly IsVisible: boolean;
+    static Show(scene: BABYLON.Scene, userOptions: Partial<IInspectorOptions>): void;
+    static Hide(): void;
 }
 declare module INSPECTOR {
     export class PropertyChangedEvent {

inspector/package.json

@@ -38,7 +38,6 @@
         "gulp-webserver": "~0.9.1",
         "mini-css-extract-plugin": "~0.4.4",
         "node-sass": "~4.9.4",
-        "office-ui-fabric-react": "^6.98.1",
         "re-resizable": "~4.9.1",
         "react": "~16.5.2",
         "react-dom": "~16.5.2",

inspector/src/Inspector.ts

@@ -330,6 +330,10 @@ export class Inspector {
             ...userOptions
         };
 
+        if (this.IsVisible && options.original) {
+            this.Hide();
+        }
+
         if (!scene) {
             scene = BABYLON.Engine.LastCreatedScene!;
         }

inspector/src/components/actionTabs/actionTabs.scss

@@ -110,7 +110,6 @@
                 &.active {
                     border-color: #ffffff;  
                     border-bottom: 2px solid transparent;           
-                    border-radius: 5px 5px 0 0;                        
                     margin-bottom: -2px;
                 }
             }
@@ -118,6 +117,7 @@
 
         .panes {
             grid-row: 2;
+            margin-bottom: 3px;
 
             display: grid;
             grid-template-rows: 1fr;
@@ -393,7 +393,7 @@
                     padding-left: 5px;
                     height: 30px;
                     display: grid;
-                    grid-template-columns: 1fr 50px;
+                    grid-template-columns: 1fr auto;
 
 
                     .label {
@@ -403,9 +403,55 @@
                     }
 
                     .checkBox {
-                        grid-column: 2;                                          
+                        grid-column: 2;
+                        
+                        display: flex;
+                        align-items: center;
+
+                        .lbl {
+                            position: relative;
+                            display: block;
+                            height: 14px;
+                            width: 34px;
+                            margin-right: 10px;
+                            background: #898989;
+                            border-radius: 100px;
+                            cursor: pointer;
+                            transition: all 0.3s ease;
+                        }
+
+                        .lbl:after {
+                            position: absolute;
+                            left: 3px;
+                            top: 2px;
+                            display: block;
+                            width: 10px;
+                            height: 10px;
+                            border-radius: 100px;
+                            background: #fff;
+                            box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
+                            content: '';
+                            transition: all 0.15s ease;
+                        }
+
+                        .lbl:active:after { 
+                            transform: scale(1.15, 0.85); 
+                        }
+
+                        .cbx:checked ~ label { 
+                            background: rgb(51, 122, 183);
+                        }
+
+                        .cbx:checked ~ label:after {
+                            left: 20px;
+                            background: rgb(22, 73, 117);
+                        }
+
+                        .hidden { 
+                            display: none; 
+                        }               
                     }                    
-                }
+                }                   
 
                 .textureLine {                   
                     display: grid;
@@ -520,8 +566,7 @@
                     padding-left: 5px;
                     height: 30px;
                     display: grid;
-                    grid-template-columns: 1fr auto 100px;
-
+                    grid-template-columns: 1fr auto;
 
                     .label {
                         grid-column: 1;
@@ -529,17 +574,47 @@
                         align-items: center;
                     }
 
-                    .slider-value {
+                    .slider {
                         grid-column: 2;
+                        
                         display: flex;
                         align-items: center;
-                        margin-right: 5px;
-                    }                    
 
-                    .slider {
-                        grid-column: 3;
+                        .range {
+                            -webkit-appearance: none;
+                            width: 120px;
+                            height: 6px;
+                            background: #d3d3d3;
+                            border-radius: 5px;
+                            outline: none;
+                            opacity: 0.7;
+                            -webkit-transition: .2s;
+                            transition: opacity .2s;
+                        }
+                        
+                        .range:hover {
+                            opacity: 1;
+                        }
+                        
+                        .range::-webkit-slider-thumb {
+                            -webkit-appearance: none;
+                            appearance: none;
+                            width: 14px;
+                            height: 14px;
+                            border-radius: 50%;
+                            background: rgb(51, 122, 183);
+                            cursor: pointer;
+                        }
+                        
+                        .range::-moz-range-thumb {
+                            width: 14px;
+                            height: 14px;
+                            border-radius: 50%;
+                            background: rgb(51, 122, 183);
+                            cursor: pointer;
+                        }
                     }                    
-                }    
+                }       
                 
                 .color3Line {
                     padding-left: 5px;
@@ -603,8 +678,8 @@
                 }                   
 
                 .paneContainer {
-                    margin-top: 5px;
-
+                    margin-top: 3px;
+                    
                     .header {
                         display: grid;
                         grid-template-columns: 1fr auto;
@@ -626,13 +701,16 @@
                             justify-items: center;
                             cursor: pointer;
                             transform-origin: center;
-                            transition: transform 100ms ease-in-out;
 
                             &.closed {
                                 transform: rotate(180deg);
                             }
                         }                        
                     }
+
+                    .paneList > div:not(:last-child) {
+                        border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
+                    }
                 }
             }
         }

inspector/src/components/actionTabs/lineContainerComponent.tsx

@@ -50,7 +50,7 @@ export class LineContainerComponent extends React.Component<ILineContainerCompon
                 {
                     this.renderHeader()
                 }
-                <div>
+                <div className="paneList">
                     {this.props.children}
                 </div >
             </div>

inspector/src/components/actionTabs/lines/checkBoxLineComponent.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Observable } from "babylonjs";
 import { PropertyChangedEvent } from "../../propertyChangedEvent";
-import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 
 export interface ICheckBoxLineComponentProps {
     label: string,
@@ -13,10 +12,14 @@ export interface ICheckBoxLineComponentProps {
 }
 
 export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean }> {
+    private static _UniqueIdSeed = 0;
+    private _uniqueId: number;
     private _localChange = false;
     constructor(props: ICheckBoxLineComponentProps) {
         super(props);
 
+        this._uniqueId = CheckBoxLineComponent._UniqueIdSeed++;
+
         if (this.props.isSelected) {
             this.state = { isSelected: this.props.isSelected() };
         } else {
@@ -64,15 +67,11 @@ export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponen
                 <div className="label">
                     {this.props.label}
                 </div>
-                <Toggle
-                    className="checkBox"
-                    defaultChecked={this.state.isSelected}
-                    label=""
-                    onText="On"
-                    offText="Off"
-                    onChange={() => this.onChange()}
-                />
+                <div className="checkBox">
+                    <input type="checkbox" id={"checkbox" + this._uniqueId} className="cbx hidden" checked={this.state.isSelected} onChange={() => this.onChange()} />
+                    <label htmlFor={"checkbox" + this._uniqueId} className="lbl"></label>
+                </div>
             </div>
         );
     }
-}
+}

inspector/src/components/actionTabs/lines/sliderLineComponent.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Observable } from "babylonjs";
 import { PropertyChangedEvent } from "../../propertyChangedEvent";
-import { Slider } from 'office-ui-fabric-react/lib/Slider';
 
 interface ISliderLineComponentProps {
     label: string,
@@ -32,8 +31,9 @@ export class SliderLineComponent extends React.Component<ISliderLineComponentPro
         return false;
     }
 
-    onChange(newValue: any) {
+    onChange(newValueString: any) {
         this._localChange = true;
+        const newValue = parseFloat(newValueString);
 
         if (this.props.onPropertyChangedObservable) {
             this.props.onPropertyChangedObservable.notifyObservers({
@@ -55,21 +55,10 @@ export class SliderLineComponent extends React.Component<ISliderLineComponentPro
                 <div className="label">
                     {this.props.label}
                 </div>
-
-                <div className="slider-value">
-                    {this.state.value.toFixed(2)}
+                <div className="slider">
+                    {this.state.value.toFixed(2)}&nbsp;<input className="range" type="range" step={this.props.step} min={this.props.minimum} max={this.props.maximum} value={this.state.value} onChange={evt => this.onChange(evt.target.value)} />
                 </div>
-                <Slider
-                    className="slider"
-                    label=""
-                    min={this.props.minimum}
-                    max={this.props.maximum}
-                    step={this.props.step}
-                    defaultValue={this.state.value}
-                    showValue={false}
-                    onChange={(value: any) => this.onChange(value)}
-                />
             </div>
         );
     }
-}
+}

inspector/src/components/actionTabs/tabs/statisticsTabComponent.tsx

@@ -67,7 +67,7 @@ export class StatisticsTabComponent extends PaneComponent {
 
         return (
             <div className="pane">
-                <TextLineComponent label="Version" value={BABYLON.Engine.Version} color="rgb(51, 122, 255)" />
+                <TextLineComponent label="Version" value={BABYLON.Engine.Version} color="rgb(113, 159, 255)" />
                 <ValueLineComponent label="FPS" value={engine.getFps()} fractionDigits={0} />
                 <LineContainerComponent title="COUNT">
                     <TextLineComponent label="Total meshes" value={scene.meshes.length.toString()} />

inspector/src/components/embedHost/embedHost.scss

@@ -76,13 +76,24 @@
         }
     }
 
+    .noPopup {
+        .panes {
+            margin-bottom: 5px;
+        }
+    }
+
     #split {
         grid-row: 2;
         overflow: hidden;
 
-        .popup {
+        
+        &.splitPopup {
             display: grid;
-            grid-template-rows: 40% 60%;
+            grid-template-rows: 300px 2px 1fr;
+
+            .panes {
+                margin-bottom: 1px;
+            }
         }
 
         #topPart {
@@ -91,11 +102,18 @@
             display: grid;
             grid-auto-rows: 100%;
         }
+        
+        #separator {
+            grid-row: 2;
+            background: white;
+            opacity: 0.1;
+        }
 
         #bottomPart {
             overflow: hidden;
-            grid-row: 2;
-            height: 100%;
+            grid-row: 3;
+            display: grid;
+            grid-auto-rows: 100%;
         }        
 
         .gutter.gutter-vertical {
@@ -104,4 +122,5 @@
             cursor: row-resize;
         }
     }
+
 }

inspector/src/components/embedHost/embedHostComponent.tsx

@@ -5,7 +5,8 @@ import { SceneExplorerComponent } from "../sceneExplorer/sceneExplorerComponent"
 import { ActionTabsComponent } from "../actionTabs/actionTabsComponent";
 import { Scene, Observable } from "babylonjs";
 
-let Split = require('react-split');
+const Split = require("react-split"); 
+
 require("./embedHost.scss");
 
 interface IEmbedHostComponentProps {
@@ -26,12 +27,13 @@ export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps
     renderContent() {
         if (this.props.popupMode) {
             return (
-                <div id="split" className="popup">
+                <div id="split" className="splitPopup">
                     <div id="topPart">
                         <SceneExplorerComponent scene={this.props.scene}
                             popupMode={true}
                             onSelectionChangeObservable={this.props.onSelectionChangeObservable} noHeader={true} />
                     </div>
+                    <div id="separator" />
                     <div id="bottomPart" style={{ marginTop: "4px", overflow: "hidden" }}>
                         <ActionTabsComponent scene={this.props.scene}
                             popupMode={true}
@@ -42,7 +44,7 @@ export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps
         }
 
         return (
-            <Split id="split" direction="vertical" gutterSize={5} cursor="grab" minSize={[300, 300]}>
+            <Split id="split" className="noPopup" direction="vertical" gutterSize={4} minSize={[200, 200]}>
                 <div id="topPart">
                     <SceneExplorerComponent scene={this.props.scene}
                         popupMode={true}

inspector/test/index.js

@@ -14,7 +14,6 @@ var Test = (function() {
     Test.prototype._run = function() {
         var _this = this;
         this._initScene();
-        this.scene.debugLayer.show();
         this.scene.executeWhenReady(function() {
             _this.engine.runRenderLoop(function() {
                 _this.scene.render();
@@ -76,7 +75,9 @@ var Test = (function() {
 
         scene.createDefaultCameraOrLight(true);
         scene.activeCamera.attachControl(canvas);
-        scene.debugLayer.show();
+        
+        scene.debugLayer.show({embedMode: true});
+        //scene.debugLayer.show();
         scene.debugLayer.onPropertyChangedObservable.add((result) => {
             console.log(result.object);
             console.log("Property : " + result.property);