import * as React from "react" ; import { HeaderComponent } from "../headerComponent" ; import Resizable from "re-resizable" ; import { SceneExplorerComponent } from "../sceneExplorer/sceneExplorerComponent" ; import { ActionTabsComponent } from "../actionTabs/actionTabsComponent" ; import { Scene } from "babylonjs/scene" ; import { GlobalState } from "../../components/globalState" ; import { IExplorerExtensibilityGroup , DebugLayerTab } from "babylonjs/Debug/debugLayer" ; const Split = require ( "split.js" ) . default ; require ( "./embedHost.scss" ) ; interface IEmbedHostComponentProps { scene : Scene ; globalState : GlobalState ; popupMode : boolean ; noClose ? : boolean ; noExpand ? : boolean ; onClose : ( ) => void ; onPopup : ( ) => void ; extensibilityGroups ? : IExplorerExtensibilityGroup [ ] ; initialTab ? : DebugLayerTab ; } export class EmbedHostComponent extends React . Component < IEmbedHostComponentProps > { private _once = true ; private splitRef : React . RefObject < HTMLDivElement > ; private topPartRef : React . RefObject < HTMLDivElement > ; private bottomPartRef : React . RefObject < HTMLDivElement > ; constructor ( props ) { super ( props ) ; this . splitRef = React . createRef ( ) ; this . topPartRef = React . createRef ( ) ; this . bottomPartRef = React . createRef ( ) ; } componentDidMount ( ) { const container = this . splitRef . current ; if ( ! container ) { return ; } Split ( [ this . topPartRef . current , this . bottomPartRef . current ] , { direction : "vertical" , minSize : [ 200 , 200 ] , gutterSize : 4 , } ) ; } renderContent ( ) { if ( this . props . popupMode ) { return ( < div id = "split" className = "splitPopup" > < div id = "topPart" > < SceneExplorerComponent scene = { this . props . scene } extensibilityGroups = { this . props . extensibilityGroups } popupMode = { true } globalState = { this . props . globalState } noHeader = { true } / > < /div> < div id = "separator" / > < div id = "bottomPart" style = { { marginTop : "4px" , overflow : "hidden" } } > < ActionTabsComponent scene = { this . props . scene } popupMode = { true } globalState = { this . props . globalState } noHeader = { true } initialTab = { this . props . initialTab } / > < /div> < /div>); } return ( < div ref = { this . splitRef } id = "split" className = "noPopup" > < div id = "topPart" ref = { this . topPartRef } > < SceneExplorerComponent scene = { this . props . scene } extensibilityGroups = { this . props . extensibilityGroups } globalState = { this . props . globalState } popupMode = { true } noHeader = { true } / > < /div> < div id = "bottomPart" ref = { this . bottomPartRef } style = { { marginTop : "4px" , overflow : "hidden" } } > < ActionTabsComponent scene = { this . props . scene } globalState = { this . props . globalState } popupMode = { true } noHeader = { true } initialTab = { this . props . initialTab } / > < /div> < /div>); } render ( ) { if ( this . props . popupMode ) { return ( < div id = "embed" > < HeaderComponent title = "INSPECTOR" noClose = { this . props . noClose } noExpand = { this . props . noExpand } handleBack = { true } onClose = { ( ) => this . props . onClose ( ) } onPopup = { ( ) => this . props . onPopup ( ) } onSelectionChangedObservable = { this . props . globalState . onSelectionChangedObservable } / > { this . renderContent ( ) } < /div>); } if ( this . _once ) { this . _once = false ; setTimeout ( ( ) => { const element = document . getElementById ( "embed" ) ; if ( ! element ) { return ; } element . style . width = "300px" ; } , 150 ) ; } return ( < Resizable id = "embed" minWidth = { 300 } maxWidth = { 600 } size = { { height : "100%" } } minHeight = "100%" enable = { { top : false , right : false , bottom : false , left : true , topRight : false , bottomRight : false , bottomLeft : false , topLeft : false } } > < HeaderComponent title = "INSPECTOR" noClose = { this . props . noClose } noExpand = { this . props . noExpand } handleBack = { true } onClose = { ( ) => this . props . onClose ( ) } onPopup = { ( ) => this . props . onPopup ( ) } onSelectionChangedObservable = { this . props . globalState . onSelectionChangedObservable } / > { this . renderContent ( ) } < /Resizable>); } }