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

Refactor toolbar buttons in App.tsx

Browse Source
This commit is contained in:
Victor Giers
2026-04-11 13:56:07 +02:00
parent 350394b197
commit 589324f6f9
1 changed files with 4 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/app/App.tsx
View File

@@ -7253,20 +7253,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
}}
/>
</label>
</div>
<div className="toolbar__actions">
<div className="toolbar__group">
<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>
<button
className="toolbar__button"
type="button"
@@ -7283,144 +7270,6 @@ export function App({ store, initialStatusMessage }: AppProps) {
>
Load Project
</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"
role="group"
aria-label="Transform operations"
>
<button
className={`toolbar__button ${transformSession.kind === "active" && transformSession.operation === "translate" ? "toolbar__button--active" : ""}`}
type="button"
data-testid="transform-translate-button"
aria-pressed={
transformSession.kind === "active" &&
transformSession.operation === "translate"
}
disabled={
editorState.toolMode !== "select" || !canTranslateSelectedTarget
}
onClick={() => beginTransformOperation("translate", "toolbar")}
>
Move ({getTransformOperationShortcut("translate")})
</button>
<button
className={`toolbar__button ${transformSession.kind === "active" && transformSession.operation === "rotate" ? "toolbar__button--active" : ""}`}
type="button"
data-testid="transform-rotate-button"
aria-pressed={
transformSession.kind === "active" &&
transformSession.operation === "rotate"
}
disabled={
editorState.toolMode !== "select" || !canRotateSelectedTarget
}
onClick={() => beginTransformOperation("rotate", "toolbar")}
>
Rotate ({getTransformOperationShortcut("rotate")})
</button>
<button
className={`toolbar__button ${transformSession.kind === "active" && transformSession.operation === "scale" ? "toolbar__button--active" : ""}`}
type="button"
data-testid="transform-scale-button"
aria-pressed={
transformSession.kind === "active" &&
transformSession.operation === "scale"
}
disabled={
editorState.toolMode !== "select" || !canScaleSelectedTarget
}
onClick={() => beginTransformOperation("scale", "toolbar")}
>
Scale ({getTransformOperationShortcut("scale")})
</button>
</div>
<div
className="toolbar__group"
role="group"
aria-label="Whitebox selection mode"
>
{WHITEBOX_SELECTION_MODES.map((mode) => (
<button
key={mode}
className={`toolbar__button toolbar__button--compact ${whiteboxSelectionMode === mode ? "toolbar__button--active" : ""}`}
type="button"
data-testid={`whitebox-selection-mode-${mode}`}
aria-pressed={whiteboxSelectionMode === mode}
onClick={() => handleWhiteboxSelectionModeChange(mode)}
>
{getWhiteboxSelectionModeLabel(mode)}
</button>
))}
</div>
<div
className="toolbar__group"
role="group"
aria-label="Whitebox snap settings"
>
<button
className={`toolbar__button ${viewportGridVisible ? "toolbar__button--active" : ""}`}
type="button"
data-testid="viewport-grid-toggle"
aria-pressed={viewportGridVisible}
onClick={handleViewportGridToggle}
>
{viewportGridVisible ? "Grid On" : "Grid Off"}
</button>
<button
className={`toolbar__button ${whiteboxSnapEnabled ? "toolbar__button--active" : ""}`}
type="button"
data-testid="whitebox-snap-toggle"
aria-pressed={whiteboxSnapEnabled}
onClick={handleWhiteboxSnapToggle}
>
{whiteboxSnapEnabled ? "Grid Snap On" : "Grid Snap Off"}
</button>
<label className="toolbar__inline-field">
<span className="label">Step</span>
<input
data-testid="whitebox-snap-step"
className="text-input toolbar__inline-input"
type="number"
min="0.01"
step="0.1"
value={whiteboxSnapStepDraft}
onChange={(event) =>
setWhiteboxSnapStepDraft(event.currentTarget.value)
}
onBlur={handleWhiteboxSnapStepBlur}
onKeyDown={(event) => {
if (event.key === "Enter") {
handleWhiteboxSnapStepBlur();
}
}}
/>
</label>
</div>
<div className="toolbar__group">
<button
className={`toolbar__button toolbar__button--accent ${blockingDiagnostics.length > 0 ? "toolbar__button--warn" : ""}`}
type="button"
@@ -7435,16 +7284,18 @@ export function App({ store, initialStatusMessage }: AppProps) {
<button
className="toolbar__button"
type="button"
data-testid="toolbar-undo-button"
disabled={!editorState.canUndo}
onClick={() => store.undo()}
onClick={handleUndo}
>
Undo
</button>
<button
className="toolbar__button"
type="button"
data-testid="toolbar-redo-button"
disabled={!editorState.canRedo}
onClick={() => store.redo()}
onClick={handleRedo}
>
Redo
</button>