Function ViewerOverlay

packages/editor/src/components/viewer-overlay.tsx:242–623

({
  projectName,
  owner,
  canShowScans = true,
  canShowGuides = true,
  onBack,
}: ViewerOverlayProps)

}

export const ViewerOverlay = ({
  projectName,
  owner,
  canShowScans = true,
  canShowGuides = true,
  onBack,
}: ViewerOverlayProps) => {
  const selection = useViewer((s) => s.selection)
  const showScans = useViewer((s) => s.showScans)
  const showGuides = useViewer((s) => s.showGuides)
  const cameraMode = useViewer((s) => s.cameraMode)
  const levelMode = useViewer((s) => s.levelMode)
  const wallMode = useViewer((s) => s.wallMode)

  // Subscribe only to the specific nodes we read so that creating an unrelated
  // node elsewhere in the scene doesn't re-render this overlay.
  const firstSelectedId = selection.selectedIds[0] ?? null
  const building = useScene((s) =>
    selection.buildingId ? (s.nodes[selection.buildingId] as BuildingNode | undefined) : null,
  )
  const level = useScene((s) =>
    selection.levelId ? (s.nodes[selection.levelId] as LevelNode | undefined) : null,
  )
  const zone = useScene((s) =>
    selection.zoneId ? (s.nodes[selection.zoneId] as ZoneNode | undefined) : null,
  )
  const selectedNode = useScene((s) =>
    firstSelectedId ? (s.nodes[firstSelectedId as AnyNodeId] as AnyNode | undefined) : null,
  )
  const levels = useScene(
    useShallow((s) => {
      if (!building) return []
      return building.children
        .map((id) => s.nodes[id as AnyNodeId] as LevelNode | undefined)
        .filter((n): n is LevelNode => n?.type === 'level')
        .sort((a, b) => a.level - b.level)
    }),
  )

  const handleLevelClick = (levelId: LevelNode['id']) => {
    // When switching levels, deselect zone and items
    useViewer.getState().setSelection({ levelId })
  }

  const handleBreadcrumbClick = (depth: 'root' | 'building' | 'level' | 'zone') => {
    switch (depth) {
      case 'root':
        useViewer.getState().resetSelection()
        break
      case 'building':
        useViewer.getState().setSelection({ levelId: null })
        break
      case 'level':
        useViewer.getState().setSelection({ zoneId: null })
        break
    }
  }