giers10/webeditor3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add viewport layout mode buttons and refactor entity addition logic in App.tsx

Browse Source
This commit is contained in:
Victor Giers
2026-04-02 23:24:37 +02:00
parent fd6f783dbc
commit 397bdff1e7
1 changed files with 29 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/app/App.tsx
View File

@@ -3828,11 +3828,26 @@ export function App({ store, initialStatusMessage }: AppProps) {
className={`toolbar__button ${editorState.toolMode === "box-create" ? "toolbar__button--active" : ""}`}
type="button"
onClick={() => store.setToolMode("box-create")}
>
>
Box Create
</button>
</div>
<div className="toolbar__group" role="group" aria-label="Viewport layout mode">
{VIEWPORT_LAYOUT_MODES.map((mode) => (
<button
key={mode}
className={`toolbar__button toolbar__button--compact ${editorState.viewportLayoutMode === mode ? "toolbar__button--active" : ""}`}
type="button"
data-testid={`viewport-layout-${mode}`}
aria-pressed={editorState.viewportLayoutMode === mode}
onClick={() => handleSetViewportLayoutMode(mode)}
>
{getViewportLayoutModeLabel(mode)}
</button>
))}
</div>
<div className="toolbar__group">
<button
className={`toolbar__button toolbar__button--accent ${blockingDiagnostics.length > 0 ? "toolbar__button--warn" : ""}`}
@@ -4115,52 +4130,21 @@ export function App({ store, initialStatusMessage }: AppProps) {
<div className="outliner-section">
<div className="label">Entities</div>
<div className="inline-actions">
<button
className="toolbar__button toolbar__button--accent"
type="button"
data-testid="outliner-add-button"
aria-haspopup="menu"
aria-expanded={addMenuPosition !== null}
onClick={handleOpenAddMenuFromButton}
>
Add
</button>
</div>
{entityDisplayList.length === 0 ? <div className="outliner-empty">No entities authored yet.</div> : null}
<div className="inline-actions">
<button className="toolbar__button" type="button" data-testid="place-player-start" onClick={() => handlePlaceEntity("playerStart")}>
Add Player Start
</button>
<button
className="toolbar__button"
type="button"
data-testid="add-entity-soundEmitter"
onClick={() => handlePlaceEntity("soundEmitter")}
>
Add Sound Emitter
</button>
</div>
<div className="inline-actions">
<button
className="toolbar__button"
type="button"
data-testid="add-entity-triggerVolume"
onClick={() => handlePlaceEntity("triggerVolume")}
>
Add Trigger Volume
</button>
<button
className="toolbar__button"
type="button"
data-testid="add-entity-teleportTarget"
onClick={() => handlePlaceEntity("teleportTarget")}
>
Add Teleport Target
</button>
</div>
<div className="inline-actions">
<button
className="toolbar__button"
type="button"
data-testid="add-entity-interactable"
onClick={() => handlePlaceEntity("interactable")}
>
Add Interactable
</button>
</div>
{entityDisplayList.length === 0 ? null : (
<div className="outliner-list">
{entityDisplayList.map(({ entity, label }) => (
@@ -4192,15 +4176,6 @@ export function App({ store, initialStatusMessage }: AppProps) {
))}
</div>
)}
<div className="inline-actions">
<button className="toolbar__button" type="button" data-testid="add-entity-pointLight" onClick={() => handlePlaceEntity("pointLight")}>
Add Point Light
</button>
<button className="toolbar__button" type="button" data-testid="add-entity-spotLight" onClick={() => handlePlaceEntity("spotLight")}>
Add Spot Light
</button>
</div>
</div>
</Panel>
</aside>