@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/editor/first-person-controls.tsx

@@ -18,6 +18,7 @@ import {
   getLevelDisplayName,
   getLevelElevations,
   getResolvedElevatorDoorStyle,
+  type InteractionSound,
   itemPrompt,
   nodeMechanism,
   openElevatorDoor,
@@ -45,12 +46,20 @@ import {
   CROUCH_FLOAT_HEIGHT,
   CROUCH_RUN_SPEED,
   CROUCH_WALK_SPEED,
+  createDroneInput,
+  DRONE_SLOW_MULTIPLIER,
+  type DroneLook,
   EYE_LERP_SPEED,
   type MovementInput,
+  openingSettled,
+  proceduralSettled,
   STAND_CAPSULE,
   STAND_CLEARANCE,
   STAND_FLOAT_HEIGHT,
+  seedDroneLook,
   setSurfaceRaycastLayers,
+  stepDroneFlight,
+  turnFirstPersonLook,
   useViewer,
   WALKTHROUGH_FOV,
 } from '@pascal-app/viewer'
@@ -76,21 +85,19 @@ import { acceleratedRaycast, computeBoundsTree, disposeBoundsTree } from 'three-
 import '../../three-types'
 import {
   closeDoorOpenState,
+  closeWindowOpenState,
   DOOR_SWING_OPEN_ANGLE,
   getDisplayedDoorValue,
-  isOperationDoorType,
-  toggleDoorOpenState,
-} from '../../lib/door-interaction'
-import { isTypingTarget } from '../../lib/typing-target'
-import {
-  closeWindowOpenState,
   getDisplayedWindowValue,
   isOperableWindowType,
+  isOperationDoorType,
+  toggleDoorOpenState,
   toggleWindowOpenState,
-} from '../../lib/window-interaction'
+} from '@pascal-app/core'
+import { isTypingTarget } from '../../lib/typing-target'
 import useEditor from '../../store/use-editor'
 import { useFirstPersonHud, type WalkthroughInteract } from '../../store/use-first-person-hud'
-import { WalkthroughHud } from '../walkthrough-hud'
+import { DroneHud, WalkthroughHud } from '../walkthrough-hud'
 import {
   buildFirstPersonColliderWorldFromRegistry,
   deriveFirstPersonSpawn,
@@ -107,13 +114,6 @@ import {
 } from './first-person/mechanism-targets'
 
 const CAMERA_EYE_OFFSET = 0.45
-const LOOK_SENSITIVITY = 0.002
-// Drone mode: metres per second, and how hard Shift boosts it. The smoothing
-// constant is an exponential approach rate, not a linear acceleration.
-const DRONE_SPEED = 7
-const DRONE_RUN_MULTIPLIER = 3
-const DRONE_SLOW_MULTIPLIER = 0.2
-const DRONE_SMOOTHING = 12
 const CONTROLLER_CENTER_FROM_EYE = 0.85
 const DOOR_INTERACTION_DISTANCE = 2.5
 const DOOR_LEAF_INTERACTION_DEPTH = 0.08
@@ -168,10 +168,7 @@ function focusFirstPersonCanvas(canvas: HTMLCanvasElement) {
 
 const cameraOffset = new Vector3()
 const cameraEuler = new Euler(0, 0, 0, 'YXZ')
-const droneEuler = new Euler(0, 0, 0, 'YXZ')
-const droneForward = new Vector3()
-const droneRight = new Vector3()
-const droneDesiredVelocity = new Vector3()
+const droneInput = createDroneInput()
 const standClearanceRaycaster = new Raycaster()
 const standClearanceUp = new Vector3(0, 1, 0)
 const centerScreenPoint = new Vector2(0, 0)
@@ -425,6 +422,40 @@ function resolveHudInteract(target: FirstPersonInteractableTarget | null): Walkt
   return { label: node.name || 'door', verb: isOpen ? 'close' : 'open' }
 }
 
+/** E plays what the viewer's callout plays for the same door, window or switch. */
+function playTargetSound(target: FirstPersonInteractableTarget) {
+  const verb = resolveHudInteract(target)?.verb
+  if (!verb || verb === 'press') return
+  const node = useScene.getState().nodes[target.id]
+  // A recipe's door or lid swings and claps shut, its drawer slides; both land on the motion's end.
+  if (target.type === 'procedural' && (verb === 'open' || verb === 'close')) {
+    if (verb === 'open') {
+      emitter.emit('interaction:sound', 'panel-open')
+      return
+    }
+    if (target.kind !== 'slide') emitter.emit('interaction:sound', 'panel-swing')
+    void proceduralSettled(target.id).then(() => emitter.emit('interaction:sound', 'panel-close'))
+    return
+  }
+  let sound: InteractionSound
+  if (verb !== 'open' && verb !== 'close')
+    sound = verb === 'turn on' || verb === 'play' ? 'switch-on' : 'switch-off'
+  else if (node?.type === 'door' && node.doorType?.startsWith('garage-')) sound = 'garage'
+  else if (node?.type === 'window') sound = verb === 'open' ? 'window-open' : 'window-close'
+  else sound = verb === 'open' ? 'door-open' : 'door-close'
+  // A built-in leaf or sash swings shut, then latches on the frame it lands.
+  if (
+    (sound === 'door-close' || sound === 'window-close') &&
+    (target.type === 'door' || target.type === 'window') &&
+    node
+  ) {
+    emitter.emit('interaction:sound', sound === 'door-close' ? 'door-swing' : 'window-swing')
+    void openingSettled(node).then(() => emitter.emit('interaction:sound', sound))
+    return
+  }
+  emitter.emit('interaction:sound', sound)
+}
+
 function resolveElevatorButtonTarget(object: Object3D): ElevatorButtonTarget | null {
   let current: Object3D | null = object
 
@@ -734,8 +765,7 @@ export const FirstPersonControls = () => {
   const controllerRef = useRef<BVHEcctrlApi | null>(null)
   const movementInputRef = useRef<MovementInput>({ ...inactiveMovementInput })
   const hadPointerLockRef = useRef(false)
-  const yawRef = useRef(0)
-  const pitchRef = useRef(0)
+  const lookRef = useRef<DroneLook>({ yaw: 0, pitch: 0 })
   const interactableTargetRef = useRef<FirstPersonInteractableTarget | null>(null)
   const hudLabelFrameRef = useRef(HUD_LABEL_SAMPLE_FRAMES - 1)
   const crouchKeyRef = useRef(false)
@@ -1131,6 +1161,7 @@ export const FirstPersonControls = () => {
 
     const target = interactableTargetRef.current ?? resolveInteractableTarget()
     if (!target) return
+    playTargetSound(target)
     if (target.type === 'mechanism') {
       const node = useScene.getState().nodes[target.id]
       if (node) toggleNodeMechanism(node)
@@ -1325,9 +1356,7 @@ export const FirstPersonControls = () => {
   // Drone picks up wherever the camera currently is — orbit pose or walk eye.
   useEffect(() => {
     if (!isDroneMode) return
-    droneEuler.setFromQuaternion(camera.quaternion)
-    yawRef.current = droneEuler.y
-    pitchRef.current = droneEuler.x
+    seedDroneLook(lookRef.current, camera.quaternion)
     droneVelocityRef.current.set(0, 0, 0)
 
     // Interaction prompts belong to walk; drop whatever its frame left behind.
@@ -1344,8 +1373,8 @@ export const FirstPersonControls = () => {
 
     const spawn = placedSpawn ?? deriveFirstPersonSpawn(camera, world)
     const [x, y, z] = spawn.position
-    yawRef.current = spawn.yaw
-    pitchRef.current = 0
+    lookRef.current.yaw = spawn.yaw
+    lookRef.current.pitch = 0
     setControllerStart({
       position: [x, y - CONTROLLER_CENTER_FROM_EYE, z],
       yaw: spawn.yaw,
@@ -1381,15 +1410,13 @@ export const FirstPersonControls = () => {
       // Shutter hold: the shot is rendering — a mouse twitch must not pan it.
       if (useEditor.getState().captureShutterHold) return
 
-      const lookSensitivity =
-        LOOK_SENSITIVITY *
-        (useEditor.getState().firstPersonMovementMode === 'drone' && droneSlowKeyRef.current
+      turnFirstPersonLook(
+        lookRef.current,
+        e.movementX,
+        e.movementY,
+        useEditor.getState().firstPersonMovementMode === 'drone' && droneSlowKeyRef.current
           ? DRONE_SLOW_MULTIPLIER
-          : 1)
-      yawRef.current -= e.movementX * lookSensitivity
-      pitchRef.current = Math.max(
-        -(Math.PI / 2 - 0.05),
-        Math.min(Math.PI / 2 - 0.05, pitchRef.current - e.movementY * lookSensitivity),
+          : 1,
       )
     }
 
@@ -1817,45 +1844,24 @@ export const FirstPersonControls = () => {
     return standClearanceRaycaster.intersectObjects(meshes, false).length === 0
   }, [])
 
-  // Drone: a free camera driven straight from the look angles — no controller,
-  // no gravity or collision clamping. WASD move along the view axes, Space or E
-  // rises, Q (or Ctrl) sinks, and Shift boosts.
+  // Drone: the viewer's free flight (`stepDroneFlight`, also behind the viewer's
+  // `DroneController`) fed from this controller's keys — WASD along the view
+  // axes, Space or E rises, Q (or Ctrl) sinks, Shift boosts, Alt slows.
   useFrame((_, delta) => {
     if (!isDroneMode) return
     // Shutter hold: freeze the drone mid-air while the shot renders.
     if (useEditor.getState().captureShutterHold) return
 
-    const step = Math.min(delta, 0.1)
     const movement = movementInputRef.current
-
-    droneEuler.set(pitchRef.current, yawRef.current, 0, 'YXZ')
-    camera.quaternion.setFromEuler(droneEuler)
-    droneForward.set(0, 0, -1).applyEuler(droneEuler)
-    droneRight.set(1, 0, 0).applyEuler(droneEuler)
-
-    droneDesiredVelocity.set(0, 0, 0)
-    if (movement.forward) droneDesiredVelocity.add(droneForward)
-    if (movement.backward) droneDesiredVelocity.sub(droneForward)
-    if (movement.rightward) droneDesiredVelocity.add(droneRight)
-    if (movement.leftward) droneDesiredVelocity.sub(droneRight)
-    if (movement.jump || droneAscendKeyRef.current) droneDesiredVelocity.y += 1
-    if (droneDescendKeyRef.current || crouchKeyRef.current) droneDesiredVelocity.y -= 1
-    if (droneDesiredVelocity.lengthSq() > 0) {
-      droneDesiredVelocity
-        .normalize()
-        .multiplyScalar(
-          DRONE_SPEED *
-            (droneSlowKeyRef.current
-              ? DRONE_SLOW_MULTIPLIER
-              : movement.run
-                ? DRONE_RUN_MULTIPLIER
-                : 1),
-        )
-    }
-
-    droneVelocityRef.current.lerp(droneDesiredVelocity, 1 - Math.exp(-step * DRONE_SMOOTHING))
-    camera.position.addScaledVector(droneVelocityRef.current, step)
-    camera.updateMatrixWorld(true)
+    droneInput.forward = movement.forward === true
+    droneInput.backward = movement.backward === true
+    droneInput.leftward = movement.leftward === true
+    droneInput.rightward = movement.rightward === true
+    droneInput.up = movement.jump === true || droneAscendKeyRef.current
+    droneInput.down = droneDescendKeyRef.current || crouchKeyRef.current
+    droneInput.boost = movement.run === true
+    droneInput.slow = droneSlowKeyRef.current
+    stepDroneFlight(camera, lookRef.current, droneInput, droneVelocityRef.current, delta)
   }, 2.5)
 
   useFrame((_, delta) => {
@@ -1899,7 +1905,7 @@ export const FirstPersonControls = () => {
 
     group.rotation.y = 0
     camera.position.copy(group.position).add(cameraOffset)
-    cameraEuler.set(pitchRef.current, yawRef.current, 0, 'YXZ')
+    cameraEuler.set(lookRef.current.pitch, lookRef.current.yaw, 0, 'YXZ')
     camera.quaternion.setFromEuler(cameraEuler)
     camera.updateMatrixWorld(true)
     syncElevatorRide(group)
@@ -1991,6 +1997,7 @@ export const FirstPersonOverlay = ({ onExit }: { onExit: () => void }) => {
   const zoneLabel = useFirstPersonHud((state) => state.zoneLabel)
   const interact = useFirstPersonHud((state) => state.interact)
   const suspended = useViewer((state) => state.walkthroughSuspended)
+  const isDroneMode = useEditor((state) => state.firstPersonMovementMode === 'drone')
 
   const handleExit = useCallback(() => {
     if (document.pointerLockElement) {
@@ -1999,6 +2006,8 @@ export const FirstPersonOverlay = ({ onExit }: { onExit: () => void }) => {
     onExit()
   }, [onExit])
 
+  if (isDroneMode) return <DroneHud onExit={handleExit} suspended={suspended} />
+
   return (
     <WalkthroughHud
       floorLabel={floorLabel}

package/src/components/editor/fit-scene-framing.test.ts

@@ -0,0 +1,318 @@
+import { describe, expect, test } from 'bun:test'
+import { CameraControlsImpl } from '@react-three/drei'
+import * as THREE from 'three'
+import {
+  computeFitSceneLookAt,
+  type PendingFitScene,
+  planFitSceneOnEvent,
+  planFitSceneOnOrbitResume,
+  planLevelFollow,
+} from './fit-scene-framing'
+
+const sampleBounds = {
+  center: [10, 20] as [number, number],
+  size: [30, 40] as [number, number],
+}
+
+describe('fit-scene framing', () => {
+  test('computes default look-at when bounds are null', () => {
+    expect(computeFitSceneLookAt(null)).toEqual({
+      eyeX: 20,
+      eyeY: 20,
+      eyeZ: 20,
+      targetX: 0,
+      targetY: 0,
+      targetZ: 0,
+      eyeHeight: 20,
+      fitSphere: { center: [0, 0, 0], radius: 15 },
+    })
+  })
+
+  test('computes orbit look-at from scene bounds', () => {
+    const lookAt = computeFitSceneLookAt(sampleBounds)
+    // Longer extent is depth=40 → distance=56, height=32
+    expect(lookAt).toEqual({
+      eyeX: 10 + 56 * 0.7,
+      eyeY: 32,
+      eyeZ: 20 + 56 * 0.7,
+      targetX: 10,
+      targetY: 0,
+      targetZ: 20,
+      eyeHeight: 32,
+      fitSphere: { center: [10, 0, 20], radius: 25 * 1.3 },
+    })
+  })
+
+  test('rests the pivot and lifts the eye by the level ground height', () => {
+    const lookAt = computeFitSceneLookAt(sampleBounds, 3)
+    expect(lookAt.targetY).toBe(3)
+    expect(lookAt.eyeY).toBe(35)
+    expect(lookAt.eyeHeight).toBe(32)
+    expect(computeFitSceneLookAt(null, 3)).toMatchObject({ eyeY: 23, targetY: 3 })
+  })
+
+  test('fits the orthographic sphere around the footprint at the pivot', () => {
+    const lookAt = computeFitSceneLookAt(sampleBounds, 3)
+    expect(lookAt.fitSphere.center).toEqual([lookAt.targetX, lookAt.targetY, lookAt.targetZ])
+    const [cx, cz] = sampleBounds.center
+    const [w, d] = sampleBounds.size
+    for (const [x, z] of [
+      [cx - w / 2, cz - d / 2],
+      [cx + w / 2, cz + d / 2],
+      [cx - w / 2, cz + d / 2],
+    ] as const) {
+      expect(Math.hypot(x - cx, z - cz)).toBeLessThan(lookAt.fitSphere.radius)
+    }
+    const lone = computeFitSceneLookAt({ center: [0, 0], size: [1, 0.2] })
+    expect(lone.fitSphere.radius).toBe(5)
+    expect(computeFitSceneLookAt(null, 3).fitSphere).toEqual({ center: [0, 3, 0], radius: 15 })
+  })
+
+  test('an orthographic camera fitted to the sphere shows the whole footprint whatever its zoom was', () => {
+    const previous = globalThis.DOMRect
+    globalThis.DOMRect ??= class {} as typeof DOMRect
+    CameraControlsImpl.install({ THREE })
+    const camera = new THREE.OrthographicCamera(-8, 8, 5, -5, 0.1, 1000)
+    const control = new CameraControlsImpl(camera)
+    const bounds = { center: [60, -20] as [number, number], size: [80, 30] as [number, number] }
+    try {
+      // The previous project left the camera zoomed in on a small room.
+      control.zoomTo(12, false)
+      const lookAt = computeFitSceneLookAt(bounds)
+      control.setLookAt(
+        lookAt.eyeX,
+        lookAt.eyeY,
+        lookAt.eyeZ,
+        lookAt.targetX,
+        lookAt.targetY,
+        lookAt.targetZ,
+        false,
+      )
+      const sphere = new THREE.Sphere(
+        new THREE.Vector3(...lookAt.fitSphere.center),
+        lookAt.fitSphere.radius,
+      )
+      control.fitToSphere(sphere, false)
+      control.update(0)
+      camera.updateMatrixWorld(true)
+
+      const target = control.getTarget(new THREE.Vector3())
+      expect(target.toArray()).toEqual([lookAt.targetX, lookAt.targetY, lookAt.targetZ])
+      const [cx, cz] = bounds.center
+      const [w, d] = bounds.size
+      for (const x of [cx - w / 2, cx + w / 2])
+        for (const z of [cz - d / 2, cz + d / 2]) {
+          const projected = new THREE.Vector3(x, 0, z).project(camera)
+          expect(Math.abs(projected.x)).toBeLessThanOrEqual(1)
+          expect(Math.abs(projected.y)).toBeLessThanOrEqual(1)
+        }
+    } finally {
+      control.dispose()
+      globalThis.DOMRect = previous
+    }
+  })
+
+  test('applies immediately when orbit controls are live', () => {
+    const plan = planFitSceneOnEvent({
+      isPreviewMode: false,
+      isFirstPersonMode: false,
+      hasControls: true,
+      bounds: sampleBounds,
+    })
+
+    expect(plan).toEqual({
+      action: 'apply',
+      lookAt: computeFitSceneLookAt(sampleBounds),
+    })
+  })
+
+  test('ignores fit-scene while preview mode is active', () => {
+    const plan = planFitSceneOnEvent({
+      isPreviewMode: true,
+      isFirstPersonMode: false,
+      hasControls: true,
+      bounds: sampleBounds,
+    })
+    expect(plan).toEqual({ action: 'ignore' })
+  })
+
+  test('queues fit-scene while first-person is active (scene-ready during FP)', () => {
+    const plan = planFitSceneOnEvent({
+      isPreviewMode: false,
+      isFirstPersonMode: true,
+      hasControls: false,
+      bounds: sampleBounds,
+    })
+
+    expect(plan).toEqual({
+      action: 'queue',
+      pending: { bounds: sampleBounds },
+    })
+  })
+
+  test('queues fit-scene when orbit controls are not mounted yet', () => {
+    const plan = planFitSceneOnEvent({
+      isPreviewMode: false,
+      isFirstPersonMode: false,
+      hasControls: false,
+      bounds: sampleBounds,
+    })
+
+    expect(plan).toEqual({
+      action: 'queue',
+      pending: { bounds: sampleBounds },
+    })
+  })
+
+  test('scene-ready during first-person then return to orbit applies the pending frame', () => {
+    // Mirrors the blocking lifecycle: fit arrives while FP is active, then
+    // orbit remounts and the queued frame must still apply.
+    let pending: PendingFitScene | null = null
+
+    const duringFirstPerson = planFitSceneOnEvent({
+      isPreviewMode: false,
+      isFirstPersonMode: true,
+      hasControls: false,
+      bounds: sampleBounds,
+    })
+    expect(duringFirstPerson.action).toBe('queue')
+    if (duringFirstPerson.action === 'queue') {
+      pending = duringFirstPerson.pending
+    }
+
+    // Still in first-person: controls are not ready, keep the pending frame.
+    expect(
+      planFitSceneOnOrbitResume({
+        isPreviewMode: false,
+        isFirstPersonMode: true,
+        hasControls: false,
+        pending,
+      }),
+    ).toEqual({ action: 'noop' })
+
+    // Leave first-person; orbit controls remount and can apply the frame.
+    const afterOrbitResume = planFitSceneOnOrbitResume({
+      isPreviewMode: false,
+      isFirstPersonMode: false,
+      hasControls: true,
+      pending,
+    })
+
+    expect(afterOrbitResume).toEqual({
+      action: 'apply',
+      lookAt: computeFitSceneLookAt(sampleBounds),
+    })
+  })
+
+  test('latest fit-scene while first-person wins when orbit resumes', () => {
+    let pending: PendingFitScene | null = null
+    const first = planFitSceneOnEvent({
+      isPreviewMode: false,
+      isFirstPersonMode: true,
+      hasControls: false,
+      bounds: null,
+    })
+    if (first.action === 'queue') pending = first.pending
+
+    const secondBounds = {
+      center: [0, 0] as [number, number],
+      size: [10, 10] as [number, number],
+    }
+    const second = planFitSceneOnEvent({
+      isPreviewMode: false,
+      isFirstPersonMode: true,
+      hasControls: false,
+      bounds: secondBounds,
+    })
+    if (second.action === 'queue') pending = second.pending
+
+    expect(
+      planFitSceneOnOrbitResume({
+        isPreviewMode: false,
+        isFirstPersonMode: false,
+        hasControls: true,
+        pending,
+      }),
+    ).toEqual({
+      action: 'apply',
+      lookAt: computeFitSceneLookAt(secondBounds),
+    })
+  })
+
+  test('does not flush a pending frame into preview mode', () => {
+    expect(
+      planFitSceneOnOrbitResume({
+        isPreviewMode: true,
+        isFirstPersonMode: false,
+        hasControls: true,
+        pending: { bounds: sampleBounds },
+      }),
+    ).toEqual({ action: 'noop' })
+  })
+})
+
+describe('level follow', () => {
+  type Inputs = { levelId: string | null; levelMode: string; camera: object; sceneEmpty: boolean }
+
+  // The effect's bookkeeping: one instance per mounted CustomCameraControls.
+  function mountLevelFollow(initial: Inputs) {
+    let firstLoad = true
+    let previous = { ...initial }
+    return (next: Inputs) => {
+      const plan = planLevelFollow({
+        firstLoad,
+        sceneEmpty: next.sceneEmpty,
+        levelChanged: previous.levelId !== next.levelId,
+        modeChanged: previous.levelMode !== next.levelMode,
+        cameraChanged: previous.camera !== next.camera,
+      })
+      firstLoad = false
+      previous = { ...next }
+      return plan
+    }
+  }
+
+  const perspective = {}
+  const loaded: Inputs = {
+    levelId: 'level_1',
+    levelMode: 'stacked',
+    camera: perspective,
+    sceneEmpty: false,
+  }
+
+  test('an empty first load takes the default pose', () => {
+    const run = mountLevelFollow({ ...loaded, levelId: null, sceneEmpty: true })
+    expect(run({ ...loaded, levelId: null, sceneEmpty: true })).toBe('default-pose')
+  })
+
+  test('a remount over a loaded scene rests the fresh pivot on the level', () => {
+    const run = mountLevelFollow(loaded)
+    expect(run(loaded)).toBe('rest-pivot')
+    expect(run(loaded)).toBe('none')
+  })
+
+  test('a level-mode change pans the pivot', () => {
+    const run = mountLevelFollow(loaded)
+    run(loaded)
+    expect(run({ ...loaded, levelMode: 'exploded' })).toBe('rest-pivot')
+  })
+
+  test('the first pick after a site-phase load pans to the level', () => {
+    const site = { ...loaded, levelId: null }
+    const run = mountLevelFollow(site)
+    run(site)
+    expect(run(loaded)).toBe('rest-pivot')
+  })
+
+  test('re-picking the same level does not move the pivot', () => {
+    const run = mountLevelFollow(loaded)
+    run(loaded)
+    expect(run({ ...loaded })).toBe('none')
+  })
+
+  test('a camera swap re-rests the new controls pivot', () => {
+    const run = mountLevelFollow(loaded)
+    run(loaded)
+    expect(run({ ...loaded, camera: {} })).toBe('rest-pivot')
+  })
+})