diff --git a/index.html b/index.html index 83a7846..1c46a25 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + blockly3d diff --git a/src/components/MenuView.scss b/src/components/MenuView.scss new file mode 100644 index 0000000..0b7060f --- /dev/null +++ b/src/components/MenuView.scss @@ -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; +} diff --git a/src/components/MenuView.tsx b/src/components/MenuView.tsx new file mode 100644 index 0000000..b5a20dc --- /dev/null +++ b/src/components/MenuView.tsx @@ -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 ( + + ); +}); diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx index 7b2cc18..9e40b48 100644 --- a/src/components/Panel.tsx +++ b/src/components/Panel.tsx @@ -1,6 +1,7 @@ import { observer } from "mobx-react-lite"; import './Panel.scss'; import { RenderInfoView } from "./RenderInfoView"; +import { MenuView } from "./MenuView"; import { state } from "../state"; export type PanelProps = { @@ -23,6 +24,7 @@ export const Panel = observer(function ({ side = 'left' }: PanelProps) { return
+