anton
/
blockly3d
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

editor nav menu in sidebar

This commit is contained in:
azykov@mail.ru 2026-06-04 11:12:56 +03:00
parent 90162d47cf
commit 8ca8f894e4
No known key found for this signature in database
4 changed files with 76 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>blockly3d</title> <title>blockly3d</title>
</head> </head>
<body> <body>

40
src/components/MenuView.scss Normal file
View File

@ -0,0 +1,40 @@
.menu {
user-select: none;
font-size: 13px;
}
.menu-node {
> summary {
list-style: none;
&::-webkit-details-marker { display: none; }
}
}
.menu-item {
display: block;
padding: 8px 8px;
cursor: pointer;
border-radius: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: rgba(255, 255, 255, 0.7);
&:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
&.active {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
}
.menu-node .menu-node > summary {
padding-left: 12px;
}
.menu-node .menu-node .menu-leaf {
padding-left: 24px;
}

33
src/components/MenuView.tsx Normal file
View File

@ -0,0 +1,33 @@
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>
);
});

2
src/components/Panel.tsx
View File

@ -1,6 +1,7 @@
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import './Panel.scss'; import './Panel.scss';
import { RenderInfoView } from "./RenderInfoView"; import { RenderInfoView } from "./RenderInfoView";
import { MenuView } from "./MenuView";
import { state } from "../state"; import { state } from "../state";
export type PanelProps = { export type PanelProps = {
@ -23,6 +24,7 @@ export const Panel = observer(function ({ side = 'left' }: PanelProps) {
return <div className={`panel ${side}`}> return <div className={`panel ${side}`}>
<div className="container"> <div className="container">
<MenuView />
<button onClick={handleLoadWorld}>Load</button> <button onClick={handleLoadWorld}>Load</button>
<button onClick={handleLoadMockWorld}>Load mock world</button> <button onClick={handleLoadMockWorld}>Load mock world</button>
<button onClick={handleCloneTest1Object}>Clone test1</button> <button onClick={handleCloneTest1Object}>Clone test1</button>