25443eba31
* Add lints for floating and misued promises * Add logging async errors in main * Add async error catch in test-utils * Change any to unknown * Trap promise errors and ignore more await warnings * Add more ignores and toSync helper * Fix more lint warnings * Add more ignores and fixes * Add more reject reporting * Add accepting arbitrary parameters to toSync() * Fix more lints * Revert unintentional change to non-arrow function * Revert unintentional change to use arrow function * Fix new warnings in main with auto updater * Fix formatting * Change lints to error This is what the recommended type checked rules do. * Fix to properly report promise rejections * Fix formatting * Fix formatting * Remove unused import * Remove unused convenience function * Move type helpers * Fix to not return promise when caller doesn't expect it * Add ignores to lsp code
80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { EngineCommandManagerEvents } from 'lang/std/engineConnection'
|
|
import { engineCommandManager, sceneInfra } from 'lib/singletons'
|
|
import { throttle, isReducedMotion } from 'lib/utils'
|
|
import { reportRejection } from 'lib/trap'
|
|
|
|
const updateDollyZoom = throttle(
|
|
(newFov: number) => sceneInfra.camControls.dollyZoom(newFov),
|
|
1000 / 15
|
|
)
|
|
|
|
export const CamToggle = () => {
|
|
const [isPerspective, setIsPerspective] = useState(true)
|
|
const [fov, setFov] = useState(40)
|
|
const [enableRotate, setEnableRotate] = useState(true)
|
|
|
|
useEffect(() => {
|
|
engineCommandManager.addEventListener(
|
|
EngineCommandManagerEvents.SceneReady,
|
|
() => {
|
|
sceneInfra.camControls.dollyZoom(fov).catch(reportRejection)
|
|
}
|
|
)
|
|
}, [])
|
|
|
|
const toggleCamera = () => {
|
|
if (isPerspective) {
|
|
isReducedMotion()
|
|
? sceneInfra.camControls.useOrthographicCamera()
|
|
: sceneInfra.camControls.animateToOrthographic().catch(reportRejection)
|
|
} else {
|
|
isReducedMotion()
|
|
? sceneInfra.camControls.usePerspectiveCamera().catch(reportRejection)
|
|
: sceneInfra.camControls.animateToPerspective().catch(reportRejection)
|
|
}
|
|
setIsPerspective(!isPerspective)
|
|
}
|
|
|
|
const handleFovChange = (newFov: number) => {
|
|
setFov(newFov)
|
|
updateDollyZoom(newFov)
|
|
}
|
|
|
|
return (
|
|
<div className="absolute right-14 bottom-3">
|
|
{isPerspective && (
|
|
<div className="">
|
|
<input
|
|
type="range"
|
|
min="4"
|
|
max="90"
|
|
step={0.5}
|
|
value={fov}
|
|
onChange={(e) => handleFovChange(Number(e.target.value))}
|
|
className="w-full cursor-pointer pointer-events-auto"
|
|
/>
|
|
</div>
|
|
)}
|
|
<button onClick={toggleCamera} className="">
|
|
{isPerspective
|
|
? 'Switch to Orthographic Camera'
|
|
: 'Switch to Perspective Camera'}
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
if (enableRotate) {
|
|
sceneInfra.camControls.enableRotate = false
|
|
} else {
|
|
sceneInfra.camControls.enableRotate = true
|
|
}
|
|
setEnableRotate(!enableRotate)
|
|
}}
|
|
className=""
|
|
>
|
|
{enableRotate ? 'Disable Rotation' : 'Enable Rotation'}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|