@jkwd/inbase 0.1.5 → 0.1.7

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

@@ -1,6 +1,13 @@
 import { Suspense } from 'react'
 import { Html, Text } from '@react-three/drei'
-import { CHANGE_HIGHLIGHT, folderFloorColor, MAP_SELECTION, type ChangeKind } from '../theme'
+import {
+  CHANGE_HIGHLIGHT,
+  CONFIG,
+  folderAisleColor,
+  folderFloorColor,
+  MAP_SELECTION,
+  type ChangeKind,
+} from '../theme'
 import type { PlacedFolder } from '../types'
 import { MapSelectBorder } from './MapSelectBorder'
 
@@ -30,6 +37,11 @@ export function FolderArea({
     : addedOnly
       ? '#16323f'
       : folderFloorColor(folder.path)
+  const aisle = highlight
+    ? highlight.aisle
+    : addedOnly
+      ? '#23485a'
+      : folderAisleColor(folder.path)
   const label =
     highlightKind === 'remove'
       ? `- ${folder.name}`
@@ -62,22 +74,16 @@ export function FolderArea({
         />
       )}
       <mesh position={[0, 0.02, 0]} rotation={[-Math.PI / 2, 0, 0]}>
-        <planeGeometry args={[2.2, folder.depth - 1.5]} />
-        <meshBasicMaterial
-          color={highlight ? highlight.aisle : addedOnly ? '#23485a' : '#2a3340'}
-        />
+        <planeGeometry args={[CONFIG.bridgeWidth, folder.depth]} />
+        <meshBasicMaterial color={aisle} />
       </mesh>
       {folder.width > 28 && (
         <mesh
-          position={[0, 0.02, folder.depth / 2 - 1.3]}
+          position={[0, 0.02, folder.depth / 2 - CONFIG.bridgeWidth / 2]}
           rotation={[-Math.PI / 2, 0, 0]}
         >
-          <planeGeometry args={[folder.width - 2.4, 2.4]} />
-          <meshBasicMaterial
-            color={
-              highlight ? highlight.aisle : addedOnly ? '#23485a' : '#2a3340'
-            }
-          />
+          <planeGeometry args={[folder.width, CONFIG.bridgeWidth]} />
+          <meshBasicMaterial color={aisle} />
         </mesh>
       )}
       <Suspense fallback={null}>

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

@@ -30,7 +30,7 @@ export function MapView({
   onTravelTo,
 }: MapViewProps) {
   const size = useThree((state) => state.size)
-  const { camera, gl, scene } = useThree()
+  const { camera, gl, invalidate, scene } = useThree()
   const bounds = useMemo(() => worldBounds(layout), [layout])
   const drag = useRef({ x: 0, y: 0, moved: false, active: false })
   const sized = size.width > 16 && size.height > 16
@@ -49,7 +49,7 @@ export function MapView({
   // Ortho up is -Z, so +Z is down the screen. Shift the view so the map sits
   // above the bottom HUD instead of centering under it.
   const cz = bounds.cz + hudReserve / 2 / zoom
-  const target = useMemo(() => [bounds.cx, 0, cz] as [number, number, number], [bounds.cx, cz])
+  const controlsRef = useRef<{ target: THREE.Vector3; update: () => void }>(null)
 
   useLayoutEffect(() => {
     if (!enabled || !(camera instanceof THREE.OrthographicCamera)) return
@@ -60,7 +60,12 @@ export function MapView({
     camera.far = 2000
     camera.zoom = zoom
     camera.updateProjectionMatrix()
-  }, [bounds.cx, camera, cz, enabled, zoom])
+    const controls = controlsRef.current
+    if (controls) {
+      controls.target.set(bounds.cx, 0, cz)
+      controls.update()
+    }
+  }, [bounds.cx, camera, cz, enabled, sized, zoom])
 
   useEffect(() => {
     if (!enabled) return
@@ -170,21 +175,79 @@ export function MapView({
       if (event.ctrlKey) event.preventDefault()
     }
 
+    const ground = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
+    const ndc = new THREE.Vector2()
+    const before = new THREE.Vector3()
+    const after = new THREE.Vector3()
+    const raycaster = new THREE.Raycaster()
+    const minZoom = Math.max(fitZoom * 0.35, 0.05)
+    const maxZoom = Math.max(fitZoom * 10, 20)
+    const zoomScale = Math.pow(0.95, 1.15)
+
+    const worldUnderCursor = (clientX: number, clientY: number, target: THREE.Vector3) => {
+      const rect = element.getBoundingClientRect()
+      if (rect.width < 2 || rect.height < 2) return false
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+      raycaster.setFromCamera(ndc, camera)
+      return Boolean(raycaster.ray.intersectPlane(ground, target))
+    }
+
+    const zoomAtCursor = (clientX: number, clientY: number, dollyScale: number) => {
+      if (!(camera instanceof THREE.OrthographicCamera)) return
+      if (!worldUnderCursor(clientX, clientY, before)) return
+      const nextZoom = Math.min(maxZoom, Math.max(minZoom, camera.zoom / dollyScale))
+      if (nextZoom === camera.zoom) return
+      camera.zoom = nextZoom
+      camera.updateProjectionMatrix()
+      if (!worldUnderCursor(clientX, clientY, after)) return
+      const dx = before.x - after.x
+      const dz = before.z - after.z
+      camera.position.x += dx
+      camera.position.z += dz
+      const controls = controlsRef.current
+      if (controls) {
+        controls.target.x += dx
+        controls.target.z += dz
+        controls.update()
+      }
+      invalidate()
+    }
+
+    const onWheel = (event: WheelEvent) => {
+      const overlay = document.elementFromPoint(event.clientX, event.clientY)
+      if (overlay?.closest('.hud-thumbnail')) {
+        event.preventDefault()
+        event.stopImmediatePropagation()
+        return
+      }
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      if (event.deltaY < 0) zoomAtCursor(event.clientX, event.clientY, zoomScale)
+      else if (event.deltaY > 0) zoomAtCursor(event.clientX, event.clientY, 1 / zoomScale)
+    }
+
     element.addEventListener('pointerdown', onDown)
     window.addEventListener('pointermove', onMove)
     window.addEventListener('pointerup', onUp)
     element.addEventListener('contextmenu', onContextMenu)
+    element.addEventListener('wheel', onWheel, { capture: true, passive: false })
     return () => {
       element.style.cursor = ''
       element.removeEventListener('pointerdown', onDown)
       window.removeEventListener('pointermove', onMove)
       window.removeEventListener('pointerup', onUp)
       element.removeEventListener('contextmenu', onContextMenu)
+      element.removeEventListener('wheel', onWheel, { capture: true })
     }
   }, [
     camera,
     enabled,
+    fitZoom,
     gl.domElement,
+    invalidate,
     layout,
     onLand,
     onSelect,
@@ -196,25 +259,19 @@ export function MapView({
   return (
     <>
       {enabled && (
-        <OrthographicCamera
-          makeDefault
-          position={[bounds.cx, 120, cz]}
-          zoom={zoom}
-          near={1}
-          far={2000}
-          up={[0, 0, -1]}
-        />
+        <OrthographicCamera makeDefault near={1} far={2000} up={[0, 0, -1]} />
       )}
       {enabled && sized && (
         <MapControls
+          ref={controlsRef}
           enableRotate={false}
           enableDamping
           dampingFactor={0.12}
           screenSpacePanning
+          zoomToCursor
           zoomSpeed={1.15}
           minZoom={Math.max(fitZoom * 0.35, 0.05)}
           maxZoom={Math.max(fitZoom * 10, 20)}
-          target={target}
         />
       )}
       {enabled &&

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

@@ -226,7 +226,15 @@ export function Player({
         makeDefault
         selector=".stage canvas"
         enabled={steering && lockEnabled}
-        onLock={() => onLockedChange(true)}
+        onLock={() => {
+          if (!lockEnabled) {
+            controlsRef.current?.unlock()
+            document.exitPointerLock()
+            onLockedChange(false)
+            return
+          }
+          onLockedChange(true)
+        }}
         onUnlock={() => onLockedChange(false)}
       />
     </>

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

@@ -8,6 +8,8 @@ type SelectionControllerProps = {
   locked: boolean
   files: Record<string, PlacedFile>
   onSelect: (fileId: string | null) => void
+  onInspect?: (fileId: string) => void
+  onAimFile?: (fileId: string | null) => void
   onAimRelation?: (aim: AimedRelation | null) => void
   onTravelTo: (fromId: string, toId: string) => void
 }
@@ -36,35 +38,50 @@ function aimKey(aim: AimedRelation | null) {
   return aim ? `${aim.from}->${aim.to}:${aim.flyTo}` : ''
 }
 
+function aimedFileId(hits: THREE.Intersection[]): string | null {
+  const file = hits.find((item) => item.object.userData.fileId)
+  return file ? (file.object.userData.fileId as string) : null
+}
+
 export function SelectionController({
   locked,
   files,
   onSelect,
+  onInspect,
+  onAimFile,
   onAimRelation,
   onTravelTo,
 }: SelectionControllerProps) {
   const { camera, scene } = useThree()
   const lastAim = useRef('')
+  const lastAimedFile = useRef<string | null>(null)
 
   useFrame(() => {
-    if (!onAimRelation) return
+    if (!onAimRelation && !onAimFile) return
     if (!locked) {
       if (lastAim.current) {
         lastAim.current = ''
-        onAimRelation(null)
+        onAimRelation?.(null)
+      }
+      if (lastAimedFile.current) {
+        lastAimedFile.current = null
+        onAimFile?.(null)
       }
       return
     }
     raycaster.setFromCamera(ndc, camera)
-    const next = aimedRelation(
-      raycaster.intersectObjects(scene.children, true),
-      camera.position,
-      files,
-    )
+    const hits = raycaster.intersectObjects(scene.children, true)
+    const next = aimedRelation(hits, camera.position, files)
     const key = aimKey(next)
-    if (key === lastAim.current) return
-    lastAim.current = key
-    onAimRelation(next)
+    if (onAimRelation && key !== lastAim.current) {
+      lastAim.current = key
+      onAimRelation(next)
+    }
+    const fileId = aimedFileId(hits)
+    if (onAimFile && fileId !== lastAimedFile.current) {
+      lastAimedFile.current = fileId
+      onAimFile(fileId)
+    }
   })
 
   useEffect(() => {
@@ -86,12 +103,18 @@ export function SelectionController({
         }, 280)
         return
       }
-      const file = hits.find((item) => item.object.userData.fileId)
-      onSelect(file ? (file.object.userData.fileId as string) : null)
+      const fileId = aimedFileId(hits)
+      onSelect(fileId)
     }
 
     const onDblClick = () => {
       if (travelTimer) window.clearTimeout(travelTimer)
+      if (!locked) return
+      raycaster.setFromCamera(ndc, camera)
+      const fileId = aimedFileId(raycaster.intersectObjects(scene.children, true))
+      if (!fileId) return
+      onSelect(fileId)
+      onInspect?.(fileId)
     }
 
     window.addEventListener('click', onClick)
@@ -101,7 +124,7 @@ export function SelectionController({
       window.removeEventListener('click', onClick)
       window.removeEventListener('dblclick', onDblClick)
     }
-  }, [camera, files, locked, onSelect, onTravelTo, scene])
+  }, [camera, files, locked, onInspect, onSelect, onTravelTo, scene])
 
   return null
 }