import React from 'react' ; import { Utils , traverse } from 'react-fiber-traverse' ; import Panel from './Panel' ; import NodeTree from './NodeTree' ; import { FiberNode } from '../types' ; type Props = { selectedIDs : number [ ] ; refreshCounter ? : number ; onNodeCreateClick ? : Function ; } ; const LayersPanel = ( { selectedIDs , refreshCounter , onNodeCreateClick , } ) => { const [ nodes , setNodes ] = React . useState < FiberNode [ ] > ( [ ] ) ; const rootNode = nodes [ 0 ] ; React . useEffect ( ( ) => { const rootFiberNode = Utils . getRootFiberNodeFromDOM ( document . getElementById ( '__next' ) ) ; let isDesignTools = false ; let nodes = [ ] ; traverse ( rootFiberNode , ( node ) => { if ( node . stateNode ?. id === '__codesign' || isDesignTools ) { isDesignTools = true ; if ( node . stateNode ?. id !== '__codesign' ) { nodes . push ( node ) ; } } } ) ; setNodes ( nodes . filter ( ( node ) => node . type ?. name !== 'DesignTools' ) ) ; } , [ refreshCounter ] ) ; return ( < Panel title = "Layers" name = "layers" > < div className = "py-1" > < NodeTree parentID = { rootNode ?. return . _debugID } nodes = { nodes } selectedIDs = { selectedIDs } onNodeCreateClick = { onNodeCreateClick } / > < /div> < /Panel>); } ; export default LayersPanel ;