@jkwd/inbase 0.1.4 → 0.1.5

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

@@ -7,6 +7,7 @@ type MapSelectBorderProps = {
   depth: number
   y?: number
   stroke?: number
+  color?: string
   userData?: Record<string, unknown>
 }
 
@@ -15,6 +16,7 @@ export function MapSelectBorder({
   depth,
   y = 0.04,
   stroke = MAP_SELECTION.blockPad,
+  color = MAP_SELECTION.color,
   userData,
 }: MapSelectBorderProps) {
   const geometry = useMemo(() => {
@@ -47,7 +49,7 @@ export function MapSelectBorder({
       userData={userData}
     >
       <meshBasicMaterial
-        color={MAP_SELECTION.color}
+        color={color}
         toneMapped={false}
         side={THREE.DoubleSide}
         depthWrite={false}

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

@@ -49,6 +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])
 
   useLayoutEffect(() => {
     if (!enabled || !(camera instanceof THREE.OrthographicCamera)) return
@@ -66,8 +67,7 @@ export function MapView({
     const element = gl.domElement
     element.style.cursor = 'grab'
 
-    const isWalkClick = (event: PointerEvent | MouseEvent) =>
-      event.shiftKey || event.ctrlKey || event.metaKey
+    const isWalkClick = (event: PointerEvent | MouseEvent) => event.ctrlKey
 
     const isWalkButton = (event: PointerEvent) =>
       event.button === 0 || (event.ctrlKey && event.button === 2)
@@ -111,6 +111,7 @@ export function MapView({
       const pick = pickAt(clientX, clientY)
       if (!pick) return false
       const { raycaster, relationHit, fileHit } = pick
+      if (fileHit) return false
 
       const hit = new THREE.Vector3()
       const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
@@ -121,7 +122,7 @@ export function MapView({
         landAt(hit.x, hit.z)
         return true
       }
-      if (relationHit || fileHit) return false
+      if (relationHit) return false
 
       landAt(hit.x, hit.z)
       return true
@@ -140,20 +141,17 @@ export function MapView({
       const pick = pickAt(event.clientX, event.clientY)
       if (!pick) return
       const { relationHit, fileHit } = pick
-      if (
-        relationHit &&
-        (!fileHit || relationHit.distance <= fileHit.distance + 0.4)
-      ) {
+      if (fileHit) {
+        onSelect(fileHit.object.userData.fileId as string)
+        return
+      }
+      if (relationHit) {
         onTravelTo(
           relationHit.object.userData.relationFrom as string,
           relationHit.object.userData.relationTo as string,
         )
         return
       }
-      if (fileHit) {
-        onSelect(fileHit.object.userData.fileId as string)
-        return
-      }
 
       const hit = new THREE.Vector3()
       const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
@@ -216,7 +214,7 @@ export function MapView({
           zoomSpeed={1.15}
           minZoom={Math.max(fitZoom * 0.35, 0.05)}
           maxZoom={Math.max(fitZoom * 10, 20)}
-          target={[bounds.cx, 0, cz]}
+          target={target}
         />
       )}
       {enabled &&

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

@@ -49,6 +49,7 @@ export function Player({
   const [steering, setSteering] = useState(true)
   const controlsRef = useRef<PointerLockControlsImpl>(null)
   const capturedLook = useRef(false)
+  const lookHeld = useRef(false)
   const flying = useRef<{
     startPos: THREE.Vector3
     endPos: THREE.Vector3
@@ -133,6 +134,31 @@ export function Player({
     controls.lock()
   }, [lockEnabled, onLockedChange, steering, walking])
 
+  useEffect(() => {
+    if (!walking) return
+
+    const looking = () =>
+      Boolean(controlsRef.current?.isLocked || document.pointerLockElement)
+
+    const onClick = (event: MouseEvent) => {
+      if (event.button !== 0 || event.detail !== 1) return
+      lookHeld.current = looking()
+    }
+
+    const onDblClick = () => {
+      if (!lookHeld.current) return
+      controlsRef.current?.unlock()
+      document.exitPointerLock()
+    }
+
+    document.addEventListener('click', onClick, true)
+    document.addEventListener('dblclick', onDblClick)
+    return () => {
+      document.removeEventListener('click', onClick, true)
+      document.removeEventListener('dblclick', onDblClick)
+    }
+  }, [walking])
+
   useFrame((_, delta) => {
     try {
       if (walking && flying.current) {
@@ -198,6 +224,7 @@ export function Player({
       <PointerLockControls
         ref={controlsRef}
         makeDefault
+        selector=".stage canvas"
         enabled={steering && lockEnabled}
         onLock={() => onLockedChange(true)}
         onUnlock={() => onLockedChange(false)}

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

@@ -125,49 +125,53 @@ export function RelationLines({
     const selectedRadius = fromAbove ? 0.2 : 0.07
     const plannedRadius = fromAbove ? 0.26 : 0.1
     const lines: LineMesh[] = []
-    const plannedKeys = new Set<string>()
+    const drawn = new Set<string>()
+
+    const addLine = (
+      fromId: string,
+      toId: string,
+      planned: boolean,
+      radius: number,
+    ) => {
+      const key = `${fromId}->${toId}`
+      if (drawn.has(key)) return
+      const from = placed[fromId]
+      const to = placed[toId]
+      if (!from || !to) return
+      drawn.add(key)
+      lines.push(edgeMesh(from, to, toId, planned, radius, fromAbove, false))
+    }
 
     for (const edge of plannedEdges) {
-      const from = placed[edge.from]
-      const to = placed[edge.to]
-      if (!from || !to) continue
-      const key = `${edge.from}->${edge.to}`
-      if (plannedKeys.has(key)) continue
-      plannedKeys.add(key)
-      lines.push(edgeMesh(from, to, edge.to, true, plannedRadius, fromAbove, false))
+      addLine(edge.from, edge.to, true, plannedRadius)
     }
 
     if (selectedId) {
-      const selected = placed[selectedId]
-      if (selected) {
-        if (importedBy) {
-          for (const file of files) {
-            if (file.id === selectedId || !file.imports.includes(selectedId)) continue
-            if (plannedKeys.has(`${file.id}->${selectedId}`)) continue
-            const importer = placed[file.id]
-            if (!importer) continue
-            lines.push(
-              edgeMesh(importer, selected, selectedId, false, selectedRadius, fromAbove, false),
-            )
-          }
-        } else {
-          const file = files.find((item) => item.id === selectedId)
-          if (file) {
-            for (const importId of file.imports) {
-              if (plannedKeys.has(`${file.id}->${importId}`)) continue
-              const target = placed[importId]
-              if (!target) continue
-              lines.push(
-                edgeMesh(selected, target, importId, false, selectedRadius, fromAbove, false),
-              )
-            }
+      if (importedBy) {
+        for (const file of files) {
+          if (file.id === selectedId || !file.imports.includes(selectedId)) continue
+          addLine(file.id, selectedId, false, selectedRadius)
+        }
+      } else {
+        const file = files.find((item) => item.id === selectedId)
+        if (file) {
+          for (const importId of file.imports) {
+            addLine(file.id, importId, false, selectedRadius)
           }
         }
       }
     }
 
     return lines
-  }, [extras, files, fromAbove, importedBy, layout.files, plannedEdges, selectedId])
+  }, [
+    extras,
+    files,
+    fromAbove,
+    importedBy,
+    layout.files,
+    plannedEdges,
+    selectedId,
+  ])
 
   if (meshes.length === 0) return null
 

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

@@ -68,21 +68,39 @@ export function SelectionController({
   })
 
   useEffect(() => {
-    const onClick = () => {
+    let travelTimer: number | undefined
+
+    const onClick = (event: MouseEvent) => {
       if (!locked) return
+      if (event.detail > 1) {
+        if (travelTimer) window.clearTimeout(travelTimer)
+        return
+      }
       raycaster.setFromCamera(ndc, camera)
       const hits = raycaster.intersectObjects(scene.children, true)
       const aim = aimedRelation(hits, camera.position, files)
       if (aim) {
-        onTravelTo(aim.from, aim.to)
+        travelTimer = window.setTimeout(() => {
+          travelTimer = undefined
+          onTravelTo(aim.from, aim.to)
+        }, 280)
         return
       }
       const file = hits.find((item) => item.object.userData.fileId)
       onSelect(file ? (file.object.userData.fileId as string) : null)
     }
 
+    const onDblClick = () => {
+      if (travelTimer) window.clearTimeout(travelTimer)
+    }
+
     window.addEventListener('click', onClick)
-    return () => window.removeEventListener('click', onClick)
+    window.addEventListener('dblclick', onDblClick)
+    return () => {
+      if (travelTimer) window.clearTimeout(travelTimer)
+      window.removeEventListener('click', onClick)
+      window.removeEventListener('dblclick', onDblClick)
+    }
   }, [camera, files, locked, onSelect, onTravelTo, scene])
 
   return null