@jkwd/inbase 0.1.4 → 0.1.6

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,8 +224,17 @@ export function Player({
       <PointerLockControls
         ref={controlsRef}
         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/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

@@ -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,54 +38,93 @@ 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(() => {
-    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 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)
-    return () => window.removeEventListener('click', onClick)
-  }, [camera, files, locked, onSelect, onTravelTo, scene])
+    window.addEventListener('dblclick', onDblClick)
+    return () => {
+      if (travelTimer) window.clearTimeout(travelTimer)
+      window.removeEventListener('click', onClick)
+      window.removeEventListener('dblclick', onDblClick)
+    }
+  }, [camera, files, locked, onInspect, onSelect, onTravelTo, scene])
 
   return null
 }