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

Add rotation input fields to App component

Browse Source
This commit is contained in:
Victor Giers
2026-04-04 19:31:44 +02:00
parent d2dcb68f16
commit 77c1e1bb9c
1 changed files with 69 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/app/App.tsx
View File

@@ -6712,7 +6712,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
data-testid="brush-center-x"
className="text-input"
type="number"
step={DEFAULT_GRID_SIZE}
step={whiteboxVectorInputStep}
value={positionDraft.x}
onChange={(event) => {
const nextValue = event.currentTarget.value;
@@ -6730,7 +6730,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
data-testid="brush-center-y"
className="text-input"
type="number"
step={DEFAULT_GRID_SIZE}
step={whiteboxVectorInputStep}
value={positionDraft.y}
onChange={(event) => {
const nextValue = event.currentTarget.value;
@@ -6748,7 +6748,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
data-testid="brush-center-z"
className="text-input"
type="number"
step={DEFAULT_GRID_SIZE}
step={whiteboxVectorInputStep}
value={positionDraft.z}
onChange={(event) => {
const nextValue = event.currentTarget.value;
@@ -6763,6 +6763,66 @@ export function App({ store, initialStatusMessage }: AppProps) {
</div>
</div>
<div className="form-section">
<div className="label">Rotation</div>
<div className="vector-inputs">
<label className="form-field">
<span className="label">X</span>
<input
data-testid="brush-rotation-x"
className="text-input"
type="number"
step="0.1"
value={rotationDraft.x}
onChange={(event) => {
const nextValue = event.currentTarget.value;
setRotationDraft((draft) => ({ ...draft, x: nextValue }));
}}
onBlur={applyRotationChange}
onKeyDown={(event) => handleDraftVectorKeyDown(event, applyRotationChange)}
onKeyUp={(event) => handleNumberInputKeyUp(event, applyRotationChange)}
onPointerUp={(event) => handleNumberInputPointerUp(event, applyRotationChange)}
/>
</label>
<label className="form-field">
<span className="label">Y</span>
<input
data-testid="brush-rotation-y"
className="text-input"
type="number"
step="0.1"
value={rotationDraft.y}
onChange={(event) => {
const nextValue = event.currentTarget.value;
setRotationDraft((draft) => ({ ...draft, y: nextValue }));
}}
onBlur={applyRotationChange}
onKeyDown={(event) => handleDraftVectorKeyDown(event, applyRotationChange)}
onKeyUp={(event) => handleNumberInputKeyUp(event, applyRotationChange)}
onPointerUp={(event) => handleNumberInputPointerUp(event, applyRotationChange)}
/>
</label>
<label className="form-field">
<span className="label">Z</span>
<input
data-testid="brush-rotation-z"
className="text-input"
type="number"
step="0.1"
value={rotationDraft.z}
onChange={(event) => {
const nextValue = event.currentTarget.value;
setRotationDraft((draft) => ({ ...draft, z: nextValue }));
}}
onBlur={applyRotationChange}
onKeyDown={(event) => handleDraftVectorKeyDown(event, applyRotationChange)}
onKeyUp={(event) => handleNumberInputKeyUp(event, applyRotationChange)}
onPointerUp={(event) => handleNumberInputPointerUp(event, applyRotationChange)}
/>
</label>
</div>
</div>
<div className="form-section">
<div className="label">Size</div>
<div className="vector-inputs">
@@ -6772,8 +6832,8 @@ export function App({ store, initialStatusMessage }: AppProps) {
data-testid="brush-size-x"
className="text-input"
type="number"
min={DEFAULT_GRID_SIZE}
step={DEFAULT_GRID_SIZE}
min="0.01"
step={whiteboxVectorInputStep}
value={sizeDraft.x}
onChange={(event) => {
const nextValue = event.currentTarget.value;
@@ -6791,8 +6851,8 @@ export function App({ store, initialStatusMessage }: AppProps) {
data-testid="brush-size-y"
className="text-input"
type="number"
min={DEFAULT_GRID_SIZE}
step={DEFAULT_GRID_SIZE}
min="0.01"
step={whiteboxVectorInputStep}
value={sizeDraft.y}
onChange={(event) => {
const nextValue = event.currentTarget.value;
@@ -6810,8 +6870,8 @@ export function App({ store, initialStatusMessage }: AppProps) {
data-testid="brush-size-z"
className="text-input"
type="number"
min={DEFAULT_GRID_SIZE}
step={DEFAULT_GRID_SIZE}
min="0.01"
step={whiteboxVectorInputStep}
value={sizeDraft.z}
onChange={(event) => {
const nextValue = event.currentTarget.value;