34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { observer } from 'mobx-react-lite';
|
|
import { state } from '../state';
|
|
import './MenuView.scss';
|
|
|
|
export const MenuView = observer(function () {
|
|
const objectIds = Object.keys(state.worldEditor.scene.objects);
|
|
const selectedId = state.worldEditor.selectedObjectId;
|
|
|
|
return (
|
|
<nav className="menu">
|
|
<details open className="menu-node">
|
|
<summary className="menu-item">Editor</summary>
|
|
<details open className="menu-node">
|
|
<summary
|
|
className={`menu-item${selectedId == null ? ' active' : ''}`}
|
|
onClick={() => state.worldEditor.resetSelectedObject()}
|
|
>
|
|
Objects
|
|
</summary>
|
|
{objectIds.map(id => (
|
|
<div
|
|
key={id}
|
|
className={`menu-item menu-leaf${selectedId === id ? ' active' : ''}`}
|
|
onClick={() => state.worldEditor.setSelectedObject(id, 'translate')}
|
|
>
|
|
{id}
|
|
</div>
|
|
))}
|
|
</details>
|
|
</details>
|
|
</nav>
|
|
);
|
|
});
|