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

Refactor terrain grid sample inputs to support all four cardinal directions (East, West, North, South)

Browse Source
This commit is contained in:
Victor Giers
2026-05-13 14:51:44 +02:00
parent a865c82240
commit 4e28568246
1 changed files with 55 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/app/App.tsx
View File

@@ -21397,80 +21397,54 @@ export function App({
<div className="label">Grid Settings</div> <div className="label">Grid Settings</div>
<div className="material-summary"> <div className="material-summary">
Cell Size changes resolution while preserving footprint. Cell Size changes resolution while preserving footprint.
Samples X/Z extend or crop terrain size toward the chosen East, West, North, and South samples extend or crop that
cardinal edge. side of the terrain.
</div> </div>
<div className="vector-inputs"> <div className="vector-inputs vector-inputs--two">
<label className="form-field"> {(
<span className="label">Samples X</span> [
<input ["east", "East"],
data-testid="terrain-grid-sample-count-x" ["west", "West"],
className="text-input" ["north", "North"],
type="number" ["south", "South"]
min={MIN_TERRAIN_SAMPLE_COUNT} ] as const
step="1" ).map(([side, label]) => (
value={terrainSampleCountXDraft} <label key={side} className="form-field">
onChange={(event) => <span className="label">{label}</span>
setTerrainSampleCountXDraft( <input
event.currentTarget.value data-testid={`terrain-grid-samples-${side}`}
) className="text-input"
} type="number"
onBlur={applyTerrainGridChange} min={MIN_TERRAIN_SAMPLE_COUNT}
onKeyDown={(event) => step="1"
handleDraftVectorKeyDown( value={terrainSideSampleDrafts[side]}
event, onChange={(event) =>
applyTerrainGridChange handleTerrainGridSideSampleDraftChange(
) side,
} event.currentTarget.value
onKeyUp={(event) => )
handleNumberInputKeyUp( }
event, onBlur={() => applyTerrainGridChange(side)}
applyTerrainGridChange onKeyDown={(event) =>
) handleDraftVectorKeyDown(event, () =>
} applyTerrainGridChange(side)
onPointerUp={(event) => )
handleNumberInputPointerUp( }
event, onKeyUp={(event) =>
applyTerrainGridChange handleNumberInputKeyUp(event, () =>
) applyTerrainGridChange(side)
} )
/> }
</label> onPointerUp={(event) =>
<label className="form-field"> handleNumberInputPointerUp(event, () =>
<span className="label">Samples Z</span> applyTerrainGridChange(side)
<input )
data-testid="terrain-grid-sample-count-z" }
className="text-input" />
type="number" </label>
min={MIN_TERRAIN_SAMPLE_COUNT} ))}
step="1" </div>
value={terrainSampleCountZDraft} <div className="vector-inputs vector-inputs--two">
onChange={(event) =>
setTerrainSampleCountZDraft(
event.currentTarget.value
)
}
onBlur={applyTerrainGridChange}
onKeyDown={(event) =>
handleDraftVectorKeyDown(
event,
applyTerrainGridChange
)
}
onKeyUp={(event) =>
handleNumberInputKeyUp(
event,
applyTerrainGridChange
)
}
onPointerUp={(event) =>
handleNumberInputPointerUp(
event,
applyTerrainGridChange
)
}
/>
</label>
<label className="form-field"> <label className="form-field">
<span className="label">Cell Size</span> <span className="label">Cell Size</span>
<input <input
@@ -21483,69 +21457,30 @@ export function App({
onChange={(event) => onChange={(event) =>
setTerrainCellSizeDraft(event.currentTarget.value) setTerrainCellSizeDraft(event.currentTarget.value)
} }
onBlur={applyTerrainGridChange} onBlur={() => applyTerrainGridChange()}
onKeyDown={(event) => onKeyDown={(event) =>
handleDraftVectorKeyDown( handleDraftVectorKeyDown(event, () =>
event, applyTerrainGridChange()
applyTerrainGridChange
) )
} }
onKeyUp={(event) => onKeyUp={(event) =>
handleNumberInputKeyUp( handleNumberInputKeyUp(event, () =>
event, applyTerrainGridChange()
applyTerrainGridChange
) )
} }
onPointerUp={(event) => onPointerUp={(event) =>
handleNumberInputPointerUp( handleNumberInputPointerUp(event, () =>
event, applyTerrainGridChange()
applyTerrainGridChange
) )
} }
/> />
</label> </label>
</div> </div>
<div className="vector-inputs">
<label className="form-field">
<span className="label">Resize X</span>
<select
data-testid="terrain-grid-resize-direction-x"
className="text-input"
value={terrainResizeDirectionXDraft}
onChange={(event) =>
setTerrainResizeDirectionXDraft(
event.currentTarget
.value as TerrainGridResizeDirectionX
)
}
>
<option value="east">East</option>
<option value="west">West</option>
</select>
</label>
<label className="form-field">
<span className="label">Resize Z</span>
<select
data-testid="terrain-grid-resize-direction-z"
className="text-input"
value={terrainResizeDirectionZDraft}
onChange={(event) =>
setTerrainResizeDirectionZDraft(
event.currentTarget
.value as TerrainGridResizeDirectionZ
)
}
>
<option value="north">North</option>
<option value="south">South</option>
</select>
</label>
</div>
<button <button
className="viewport-panel__button" className="viewport-panel__button"
type="button" type="button"
data-testid="terrain-grid-apply" data-testid="terrain-grid-apply"
onClick={applyTerrainGridChange} onClick={() => applyTerrainGridChange()}
> >
Apply Grid Apply Grid
</button> </button>