@jkwd/inbase 0.1.6 → 0.1.8

package/apps/explorer/src/scene/Player.tsx

@@ -1,12 +1,36 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useFrame, useThree } from '@react-three/fiber'
 import { PerspectiveCamera, PointerLockControls } from '@react-three/drei'
 import type { PointerLockControls as PointerLockControlsImpl } from 'three-stdlib'
 import * as THREE from 'three'
 import { CONFIG } from '../theme'
-import { locationLabel } from '../layout'
 import type { FlyTo, ViewMode, WorldLayout } from '../types'
 
+const lookDir = new THREE.Vector3()
+const flyPos = new THREE.Vector3()
+const flyLook = new THREE.Vector3()
+
+function smootherstep(t: number) {
+  const x = Math.min(1, Math.max(0, t))
+  return x * x * x * (x * (x * 6 - 15) + 10)
+}
+
+function quadBezier(
+  out: THREE.Vector3,
+  a: THREE.Vector3,
+  b: THREE.Vector3,
+  c: THREE.Vector3,
+  t: number,
+) {
+  const u = 1 - t
+  out.set(
+    u * u * a.x + 2 * u * t * b.x + t * t * c.x,
+    u * u * a.y + 2 * u * t * b.y + t * t * c.y,
+    u * u * a.z + 2 * u * t * b.z + t * t * c.z,
+  )
+  return out
+}
+
 type PlayerProps = {
   layout: WorldLayout
   mode: ViewMode
@@ -14,19 +38,16 @@ type PlayerProps = {
   locked: boolean
   lockEnabled?: boolean
   onLockedChange: (locked: boolean) => void
-  onFolderChange: (label: string) => void
   onWalkPosition: (x: number, z: number) => void
   flyTo: FlyTo | null
 }
 
 export function Player({
-  layout,
   mode,
   landAt,
   locked,
   lockEnabled = true,
   onLockedChange,
-  onFolderChange,
   onWalkPosition,
   flyTo,
 }: PlayerProps) {
@@ -39,52 +60,85 @@ export function Player({
     right: false,
     sprint: false,
   })
-  const lastFolder = useRef<string | null>(null)
   const front = useRef(new THREE.Vector3())
   const right = useRef(new THREE.Vector3())
   const up = useRef(new THREE.Vector3(0, 1, 0))
   const move = useRef(new THREE.Vector3())
   const lastFly = useRef(0)
-  const lookAt = useRef(new THREE.Vector3())
   const [steering, setSteering] = useState(true)
   const controlsRef = useRef<PointerLockControlsImpl>(null)
   const capturedLook = useRef(false)
   const lookHeld = useRef(false)
+  const poseReady = useRef(false)
+  const groundedPose = useRef({
+    pos: new THREE.Vector3(),
+    look: new THREE.Vector3(),
+  })
   const flying = useRef<{
     startPos: THREE.Vector3
+    midPos: THREE.Vector3
     endPos: THREE.Vector3
-    lookAt: THREE.Vector3
+    startLook: THREE.Vector3
+    endLook: THREE.Vector3
     duration: number
     t: number
   } | null>(null)
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!walking) {
       flying.current = null
       capturedLook.current = false
+      poseReady.current = false
       setSteering(true)
       return
     }
     if (flyTo && flyTo.nonce !== lastFly.current) {
       lastFly.current = flyTo.nonce
-      const end = new THREE.Vector3(landAt[0], CONFIG.eyeHeight, landAt[1])
-      lookAt.current.set(flyTo.lookAt[0], flyTo.lookAt[1], flyTo.lookAt[2])
-      const dist = camera.position.distanceTo(end)
+      const endPos = new THREE.Vector3(landAt[0], CONFIG.eyeHeight, landAt[1])
+      const endLook = new THREE.Vector3(flyTo.lookAt[0], flyTo.lookAt[1], flyTo.lookAt[2])
+      const startPos = flying.current
+        ? camera.position.clone()
+        : poseReady.current
+          ? groundedPose.current.pos.clone()
+          : new THREE.Vector3(flyTo.from[0], CONFIG.eyeHeight, flyTo.from[1])
+      const startLook = new THREE.Vector3()
+      if (flying.current || poseReady.current) {
+        camera.getWorldDirection(lookDir)
+        startLook.copy(startPos).addScaledVector(lookDir, 16)
+      } else {
+        startLook.copy(startPos).lerp(endLook, 0.4)
+      }
+
+      const dist = startPos.distanceTo(endPos)
+      if (dist < 0.2) {
+        placeCamera(camera, endPos, endLook)
+        return
+      }
+
+      const lift = Math.min(26, 6 + dist * 0.22)
       flying.current = {
-        startPos: camera.position.clone(),
-        endPos: end,
-        lookAt: lookAt.current.clone(),
-        duration: Math.min(1.35, Math.max(0.55, dist * 0.025)),
+        startPos,
+        midPos: new THREE.Vector3(
+          (startPos.x + endPos.x) * 0.5,
+          CONFIG.eyeHeight + lift,
+          (startPos.z + endPos.z) * 0.5,
+        ),
+        endPos,
+        startLook,
+        endLook,
+        duration: Math.min(2.6, Math.max(0.8, 0.55 + dist * 0.04)),
         t: 0,
       }
+      placeCamera(camera, startPos, startLook)
       setSteering(false)
       return
     }
     if (flying.current) return
-    camera.up.set(0, 1, 0)
-    camera.position.set(landAt[0], CONFIG.eyeHeight, landAt[1])
-    camera.lookAt(landAt[0], CONFIG.eyeHeight, landAt[1] + 10)
-    camera.updateProjectionMatrix()
+    placeCamera(
+      camera,
+      new THREE.Vector3(landAt[0], CONFIG.eyeHeight, landAt[1]),
+      new THREE.Vector3(landAt[0], CONFIG.eyeHeight, landAt[1] + 10),
+    )
   }, [camera, flyTo, landAt, walking])
 
   useEffect(() => {
@@ -163,20 +217,21 @@ export function Player({
     try {
       if (walking && flying.current) {
         const flight = flying.current
-        flight.t += delta / flight.duration
+        flight.t += Math.min(delta, 0.05) / flight.duration
         const t = Math.min(1, flight.t)
-        const ease = t * t * (3 - 2 * t)
-        camera.position.lerpVectors(flight.startPos, flight.endPos, ease)
-        const dist = flight.startPos.distanceTo(flight.endPos)
-        camera.position.y =
-          CONFIG.eyeHeight + Math.sin(t * Math.PI) * Math.min(14, 3.5 + dist * 0.1)
+        const ease = smootherstep(t)
+        quadBezier(flyPos, flight.startPos, flight.midPos, flight.endPos, ease)
+        flyLook.lerpVectors(flight.startLook, flight.endLook, ease)
+        camera.position.copy(flyPos)
         camera.up.set(0, 1, 0)
-        camera.lookAt(flight.lookAt)
+        camera.lookAt(flyLook)
+        camera.rotation.order = 'YXZ'
         if (t >= 1) {
-          camera.position.copy(flight.endPos)
-          camera.up.set(0, 1, 0)
-          camera.lookAt(flight.lookAt)
+          placeCamera(camera, flight.endPos, flight.endLook)
           flying.current = null
+          poseReady.current = true
+          groundedPose.current.pos.copy(flight.endPos)
+          groundedPose.current.look.copy(flight.endLook)
           setSteering(true)
         }
       } else if (walking && locked) {
@@ -198,12 +253,13 @@ export function Player({
       }
 
       if (!walking) return
-      onWalkPosition(camera.position.x, camera.position.z)
-      const nextPath = locationLabel(camera.position.x, camera.position.z, layout)
-      if (nextPath !== lastFolder.current) {
-        lastFolder.current = nextPath
-        onFolderChange(nextPath)
+      if (!flying.current) {
+        poseReady.current = true
+        groundedPose.current.pos.copy(camera.position)
+        camera.getWorldDirection(lookDir)
+        groundedPose.current.look.copy(camera.position).addScaledVector(lookDir, 16)
       }
+      onWalkPosition(camera.position.x, camera.position.z)
     } catch {
       // Movement must never stop the render loop.
     }
@@ -213,13 +269,7 @@ export function Player({
 
   return (
     <>
-      <PerspectiveCamera
-        makeDefault
-        fov={70}
-        near={0.1}
-        far={400}
-        position={[landAt[0], CONFIG.eyeHeight, landAt[1]]}
-      />
+      <PerspectiveCamera makeDefault fov={70} near={0.1} far={400} />
       <PlayerLight />
       <PointerLockControls
         ref={controlsRef}
@@ -241,6 +291,20 @@ export function Player({
   )
 }
 
+function placeCamera(
+  camera: THREE.Camera,
+  position: THREE.Vector3,
+  lookAt: THREE.Vector3,
+) {
+  camera.position.copy(position)
+  camera.up.set(0, 1, 0)
+  camera.lookAt(lookAt)
+  camera.rotation.order = 'YXZ'
+  if ('updateProjectionMatrix' in camera) {
+    ;(camera as THREE.PerspectiveCamera).updateProjectionMatrix()
+  }
+}
+
 function PlayerLight() {
   const { camera } = useThree()
   const overhead = useRef<THREE.PointLight>(null)

package/apps/explorer/src/scene/SelectionThumbnail.tsx

@@ -15,6 +15,7 @@ import { FolderArea } from './FolderArea'
 import { RelationLines } from './RelationLines'
 
 type Vec3 = [number, number, number]
+type Orbit = { yaw: number; pitch: number }
 
 type SelectionThumbnailProps = {
   graph: CodebaseGraph
@@ -24,10 +25,12 @@ type SelectionThumbnailProps = {
   landAt: [number, number]
   importedBy?: boolean
   minimized?: boolean
+  maximized?: boolean
   plannedIds?: string[]
   createdIds?: string[]
   deletedIds?: string[]
   onMinimize?: () => void
+  onMaximize?: () => void
   onHide: () => void
 }
 
@@ -159,7 +162,10 @@ function resolveTarget(
 
 const MIN_ZOOM = 0.45
 const MAX_ZOOM = 6
+const MIN_ORBIT_PITCH = 0.08
+const MAX_ORBIT_PITCH = Math.PI / 2 - 0.06
 const ZERO_PAN: Vec3 = [0, 0, 0]
+const ZERO_ORBIT: Orbit = { yaw: 0, pitch: 0 }
 const WORLD_UP: Vec3 = [0, 1, 0]
 const LABEL_PROJECT = new THREE.Vector3()
 const GROUND_PLANE = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
@@ -212,14 +218,61 @@ function cameraOffset(position: Vec3, lookAt: Vec3, zoom: number): Vec3 {
   return vecScale(vecSub(position, lookAt), 1 / zoom)
 }
 
+function sphericalFromOffset(offset: Vec3) {
+  const radius = vecLength(offset)
+  return {
+    radius,
+    yaw: Math.atan2(offset[0], offset[2]),
+    pitch: Math.asin(
+      Math.min(1, Math.max(-1, offset[1] / Math.max(radius, 1e-6))),
+    ),
+  }
+}
+
+function offsetFromSpherical(radius: number, yaw: number, pitch: number): Vec3 {
+  const cosPitch = Math.cos(pitch)
+  return [
+    radius * Math.sin(yaw) * cosPitch,
+    radius * Math.sin(pitch),
+    radius * Math.cos(yaw) * cosPitch,
+  ]
+}
+
+function clampOrbitPitch(basePitch: number, orbitPitch: number) {
+  return Math.min(
+    MAX_ORBIT_PITCH - basePitch,
+    Math.max(MIN_ORBIT_PITCH - basePitch, orbitPitch),
+  )
+}
+
+function orbitedOffset(
+  position: Vec3,
+  lookAt: Vec3,
+  zoom: number,
+  orbit: Orbit,
+): Vec3 {
+  const base = cameraOffset(position, lookAt, zoom)
+  if (orbit.yaw === 0 && orbit.pitch === 0) return base
+  const spherical = sphericalFromOffset(base)
+  return offsetFromSpherical(
+    spherical.radius,
+    spherical.yaw + orbit.yaw,
+    Math.min(
+      MAX_ORBIT_PITCH,
+      Math.max(MIN_ORBIT_PITCH, spherical.pitch + orbit.pitch),
+    ),
+  )
+}
+
 function applyThumbnailCamera(
   camera: THREE.Camera,
   position: Vec3,
   lookAt: Vec3,
   zoom: number,
   pan: Vec3,
+  orbit: Orbit,
 ) {
-  const offset = cameraOffset(position, lookAt, zoom)
+  const offset = orbitedOffset(position, lookAt, zoom, orbit)
   camera.up.set(0, 1, 0)
   camera.position.set(
     lookAt[0] + pan[0] + offset[0],
@@ -247,8 +300,13 @@ function worldUnderCursor(
   return Boolean(CURSOR_RAY.ray.intersectPlane(GROUND_PLANE, target))
 }
 
-function cameraPanBasis(position: Vec3, lookAt: Vec3, zoom: number) {
-  const offset = cameraOffset(position, lookAt, zoom)
+function cameraPanBasis(
+  position: Vec3,
+  lookAt: Vec3,
+  zoom: number,
+  orbit: Orbit,
+) {
+  const offset = orbitedOffset(position, lookAt, zoom, orbit)
   const forward = vecNormalize(vecScale(offset, -1))
   const right = vecNormalize(vecCross(forward, WORLD_UP))
   const up = vecNormalize(vecCross(right, forward))
@@ -328,12 +386,14 @@ function CameraRig({
   lookAt,
   zoomRef,
   panRef,
+  orbitRef,
   cameraRef,
 }: {
   position: Vec3
   lookAt: Vec3
   zoomRef: { current: number }
   panRef: { current: Vec3 }
+  orbitRef: { current: Orbit }
   cameraRef: { current: THREE.Camera | null }
 }) {
   const { camera } = useThree()
@@ -345,10 +405,19 @@ function CameraRig({
       lookAt,
       zoomRef.current,
       panRef.current,
+      orbitRef.current,
     )
   }
 
-  useLayoutEffect(aim, [camera, cameraRef, lookAt, panRef, position, zoomRef])
+  useLayoutEffect(aim, [
+    camera,
+    cameraRef,
+    lookAt,
+    orbitRef,
+    panRef,
+    position,
+    zoomRef,
+  ])
   useFrame(aim)
   return null
 }
@@ -393,6 +462,7 @@ function ThumbnailScene({
   zoom,
   zoomRef,
   panRef,
+  orbitRef,
   cameraRef,
   visibleLabelIds,
   onVisibleLabels,
@@ -408,6 +478,7 @@ function ThumbnailScene({
   zoom: number
   zoomRef: { current: number }
   panRef: { current: Vec3 }
+  orbitRef: { current: Orbit }
   cameraRef: { current: THREE.Camera | null }
   visibleLabelIds: Set<string>
   onVisibleLabels: (ids: Set<string>) => void
@@ -464,6 +535,7 @@ function ThumbnailScene({
         lookAt={target.camera.lookAt}
         zoomRef={zoomRef}
         panRef={panRef}
+        orbitRef={orbitRef}
         cameraRef={cameraRef}
       />
       <ThumbnailLabelFilter
@@ -524,16 +596,19 @@ export function SelectionThumbnail({
   landAt,
   importedBy = false,
   minimized = false,
+  maximized = false,
   plannedIds = [],
   createdIds = [],
   deletedIds = [],
   onMinimize,
+  onMaximize,
   onHide,
 }: SelectionThumbnailProps) {
   const stageRef = useRef<HTMLDivElement>(null)
   const cameraRef = useRef<THREE.Camera | null>(null)
   const zoomRef = useRef(1)
   const panRef = useRef<Vec3>(ZERO_PAN)
+  const orbitRef = useRef<Orbit>(ZERO_ORBIT)
   const pinchRef = useRef({ start: 0, zoom: 1 })
   const zoomAtCursorRef = useRef(
     (_clientX: number, _clientY: number, _dollyScale: number) => {},
@@ -543,9 +618,12 @@ export function SelectionThumbnail({
     x: 0,
     y: 0,
     pan: ZERO_PAN,
+    orbit: ZERO_ORBIT,
+    rotate: false,
   })
   const [zoom, setZoom] = useState(1)
   const [panning, setPanning] = useState(false)
+  const [orbiting, setOrbiting] = useState(false)
   const [visibleLabelIds, setVisibleLabelIds] = useState<Set<string>>(
     () => new Set(),
   )
@@ -574,9 +652,11 @@ export function SelectionThumbnail({
   useEffect(() => {
     zoomRef.current = 1
     panRef.current = ZERO_PAN
+    orbitRef.current = ZERO_ORBIT
     setZoom(1)
     panningRef.current = false
     setPanning(false)
+    setOrbiting(false)
   }, [selectedId, selectedFolder, landAt])
 
   useEffect(() => {
@@ -624,6 +704,7 @@ export function SelectionThumbnail({
           target.camera.lookAt,
           nextZoom,
           panRef.current,
+          orbitRef.current,
         )
         if (
           hit &&
@@ -640,6 +721,7 @@ export function SelectionThumbnail({
             target.camera.lookAt,
             nextZoom,
             panRef.current,
+            orbitRef.current,
           )
         }
       }
@@ -692,6 +774,7 @@ export function SelectionThumbnail({
       dragRef.current.pointerId = -1
       panningRef.current = false
       setPanning(false)
+      setOrbiting(false)
       pinchRef.current = {
         start: touchDistance(event.touches),
         zoom: zoomRef.current,
@@ -722,6 +805,8 @@ export function SelectionThumbnail({
         x: event.clientX,
         y: event.clientY,
         pan: panRef.current,
+        orbit: { ...orbitRef.current },
+        rotate: event.metaKey || event.ctrlKey,
       }
       stage.setPointerCapture(event.pointerId)
     }
@@ -733,12 +818,28 @@ export function SelectionThumbnail({
       if (!panningRef.current) {
         if (Math.hypot(dx, dy) <= 3) return
         panningRef.current = true
-        setPanning(true)
+        if (dragRef.current.rotate) setOrbiting(true)
+        else setPanning(true)
+      }
+      if (dragRef.current.rotate) {
+        const speed = (2 * Math.PI) / Math.max(stage.clientHeight, 1)
+        const basePitch = sphericalFromOffset(
+          cameraOffset(target.camera.position, target.camera.lookAt, 1),
+        ).pitch
+        orbitRef.current = {
+          yaw: dragRef.current.orbit.yaw - dx * speed,
+          pitch: clampOrbitPitch(
+            basePitch,
+            dragRef.current.orbit.pitch + dy * speed,
+          ),
+        }
+        return
       }
       const { right, up, distance } = cameraPanBasis(
         target.camera.position,
         target.camera.lookAt,
         zoomRef.current,
+        orbitRef.current,
       )
       const speed = distance / Math.max(stage.clientHeight, 1)
       panRef.current = vecAdd(
@@ -752,6 +853,7 @@ export function SelectionThumbnail({
       dragRef.current.pointerId = -1
       panningRef.current = false
       setPanning(false)
+      setOrbiting(false)
       if (stage.hasPointerCapture(event.pointerId)) {
         stage.releasePointerCapture(event.pointerId)
       }
@@ -762,6 +864,7 @@ export function SelectionThumbnail({
       event.preventDefault()
       zoomRef.current = 1
       panRef.current = ZERO_PAN
+      orbitRef.current = ZERO_ORBIT
       setZoom(1)
     }
 
@@ -789,14 +892,29 @@ export function SelectionThumbnail({
     }
   }, [minimized, target])
 
+  useEffect(() => {
+    if (!maximized) return
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return
+      event.preventDefault()
+      onMaximize?.()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [maximized, onMaximize])
+
   if (!target) return null
 
   return (
-    <div className="hud-thumbnail" data-minimized={minimized}>
+    <div
+      className="hud-thumbnail"
+      data-minimized={minimized}
+      data-maximized={maximized}
+    >
       <div className="hud-thumbnail-bar">
         <span>3D view</span>
         <div className="hud-panel-controls">
-          {onMinimize && (
+          {onMinimize && !maximized && (
             <button
               className="hud-button hud-icon-button hud-panel-control"
               type="button"
@@ -806,6 +924,16 @@ export function SelectionThumbnail({
               {minimized ? '+' : '−'}
             </button>
           )}
+          {onMaximize && (
+            <button
+              className="hud-button hud-icon-button hud-panel-control"
+              type="button"
+              aria-label={maximized ? 'Minimize 3D view' : 'Maximize 3D view'}
+              onClick={onMaximize}
+            >
+              {maximized ? '−' : '□'}
+            </button>
+          )}
           <button
             className="hud-button hud-icon-button hud-panel-control"
             type="button"
@@ -821,6 +949,7 @@ export function SelectionThumbnail({
         className="hud-thumbnail-stage"
         ref={stageRef}
         data-panning={panning}
+        data-orbiting={orbiting}
       >
         <Canvas
           shadows={false}
@@ -846,12 +975,15 @@ export function SelectionThumbnail({
             zoom={zoom}
             zoomRef={zoomRef}
             panRef={panRef}
+            orbitRef={orbitRef}
             cameraRef={cameraRef}
             visibleLabelIds={visibleLabelIds}
             onVisibleLabels={setVisibleLabelIds}
           />
         </Canvas>
-        <div className="hud-thumbnail-hint">Scroll zoom · drag pan</div>
+        <div className="hud-thumbnail-hint">
+          Scroll zoom · drag pan · ⌘ drag rotate
+        </div>
         <div className="hud-thumbnail-nav">
           <button
             className="hud-button hud-icon-button"

package/apps/explorer/src/scene/World.tsx

@@ -41,7 +41,6 @@ type WorldProps = {
   onSelect: (fileId: string | null) => void
   onSelectFolder: (folderPath: string | null) => void
   onLockedChange: (locked: boolean) => void
-  onFolderChange: (label: string) => void
   onLand: (x: number, z: number) => void
   onWalkPosition: (x: number, z: number) => void
   onContext: (context: UserContext) => void
@@ -81,7 +80,6 @@ export function World({
   onSelect,
   onSelectFolder,
   onLockedChange,
-  onFolderChange,
   onLand,
   onWalkPosition,
   onContext,
@@ -277,7 +275,6 @@ export function World({
         locked={locked}
         lockEnabled={!placing}
         onLockedChange={onLockedChange}
-        onFolderChange={onFolderChange}
         onWalkPosition={onWalkPosition}
         flyTo={flyTo}
       />

package/apps/explorer/src/types.ts

@@ -69,6 +69,7 @@ export type ViewMode = 'map' | 'walk'
 
 export type FlyTo = {
   nonce: number
+  from: [number, number]
   lookAt: [number, number, number]
 }