Merge pull request #116 from pascalorg/fix/community-feedback-pass-3
Fix/community feedback pass 3
This commit is contained in:
Wassim SAMAD
@@ -44,23 +44,33 @@ export const ViewerCameraControls = () => {
|
||||
controls.current.setLookAt(30, 30, 30, 0, 0, 0, false)
|
||||
}
|
||||
|
||||
if (!targetNodeId) return
|
||||
|
||||
const node = nodes[targetNodeId]
|
||||
let node = targetNodeId ? nodes[targetNodeId] : null;
|
||||
if (!targetNodeId) {
|
||||
const site = Object.values(nodes).find((n) => n.type === 'site')
|
||||
node = site || null
|
||||
}
|
||||
if (!node) return
|
||||
|
||||
// Check if node has a saved camera
|
||||
if (node.camera) {
|
||||
|
||||
const { position, target } = node.camera
|
||||
controls.current.setLookAt(
|
||||
position[0],
|
||||
position[1],
|
||||
position[2],
|
||||
target[0],
|
||||
target[1],
|
||||
target[2],
|
||||
true,
|
||||
)
|
||||
requestAnimationFrame(() => {
|
||||
controls.current.setLookAt(
|
||||
position[0],
|
||||
position[1],
|
||||
position[2],
|
||||
target[0],
|
||||
target[1],
|
||||
target[2],
|
||||
true,
|
||||
)
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!targetNodeId) {
|
||||
// No selection and no site - do nothing
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,26 @@
|
||||
'use client'
|
||||
|
||||
import { type AnyNode, type AnyNodeId, type BuildingNode, type LevelNode, type ZoneNode, useScene } from '@pascal-app/core'
|
||||
import {
|
||||
type AnyNode,
|
||||
type AnyNodeId,
|
||||
type BuildingNode,
|
||||
type LevelNode,
|
||||
useScene,
|
||||
type ZoneNode,
|
||||
} from '@pascal-app/core'
|
||||
import { useViewer } from '@pascal-app/viewer'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Box,
|
||||
ChevronRight,
|
||||
Diamond,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Image,
|
||||
Layers,
|
||||
Layers2,
|
||||
} from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import { ArrowLeft, Box, ChevronRight, Diamond, Eye, EyeOff, Image, Layers, Layers2 } from 'lucide-react'
|
||||
import type { ProjectOwner } from '@/features/community/lib/projects/types'
|
||||
|
||||
const getNodeName = (node: AnyNode): string => {
|
||||
@@ -23,7 +40,12 @@ interface ViewerOverlayProps {
|
||||
canShowGuides?: boolean
|
||||
}
|
||||
|
||||
export const ViewerOverlay = ({ projectName, owner, canShowScans = true, canShowGuides = true }: ViewerOverlayProps) => {
|
||||
export const ViewerOverlay = ({
|
||||
projectName,
|
||||
owner,
|
||||
canShowScans = true,
|
||||
canShowGuides = true,
|
||||
}: ViewerOverlayProps) => {
|
||||
const selection = useViewer((s) => s.selection)
|
||||
const nodes = useScene((s) => s.nodes)
|
||||
const showScans = useViewer((s) => s.showScans)
|
||||
@@ -32,20 +54,24 @@ export const ViewerOverlay = ({ projectName, owner, canShowScans = true, canShow
|
||||
const levelMode = useViewer((s) => s.levelMode)
|
||||
const wallMode = useViewer((s) => s.wallMode)
|
||||
|
||||
const building = selection.buildingId ? (nodes[selection.buildingId] as BuildingNode | undefined) : null
|
||||
const building = selection.buildingId
|
||||
? (nodes[selection.buildingId] as BuildingNode | undefined)
|
||||
: null
|
||||
const level = selection.levelId ? (nodes[selection.levelId] as LevelNode | undefined) : null
|
||||
const zone = selection.zoneId ? (nodes[selection.zoneId] as ZoneNode | undefined) : null
|
||||
|
||||
// Get the first selected item (if any)
|
||||
const selectedNode = selection.selectedIds.length > 0
|
||||
? (nodes[selection.selectedIds[0] as AnyNodeId] as AnyNode | undefined)
|
||||
: null
|
||||
const selectedNode =
|
||||
selection.selectedIds.length > 0
|
||||
? (nodes[selection.selectedIds[0] as AnyNodeId] as AnyNode | undefined)
|
||||
: null
|
||||
|
||||
// Get all levels for the selected building
|
||||
const levels = building?.children
|
||||
.map((id) => nodes[id as AnyNodeId] as LevelNode | undefined)
|
||||
.filter((n): n is LevelNode => n?.type === 'level')
|
||||
.sort((a, b) => a.level - b.level) ?? []
|
||||
const levels =
|
||||
building?.children
|
||||
.map((id) => 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
|
||||
@@ -68,219 +94,249 @@ export const ViewerOverlay = ({ projectName, owner, canShowScans = true, canShow
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Unified top-left card */}
|
||||
<div className="absolute top-4 left-4 z-10 flex flex-col gap-3">
|
||||
<div className="bg-white/80 backdrop-blur-sm rounded-lg rounded-smooth shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)] overflow-hidden">
|
||||
{/* Project info + back */}
|
||||
<div className="flex items-center gap-3 px-3 py-2">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md hover:bg-neutral-100 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 text-neutral-500" />
|
||||
</Link>
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-medium text-neutral-800 truncate">
|
||||
{projectName || 'Untitled'}
|
||||
{/* Unified top-left card */}
|
||||
<div className="absolute top-4 left-4 z-20 flex flex-col gap-3">
|
||||
<div className="bg-white/80 backdrop-blur-sm rounded-lg rounded-smooth shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)] overflow-hidden">
|
||||
{/* Project info + back */}
|
||||
<div className="flex items-center gap-3 px-3 py-2">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md hover:bg-neutral-100 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 text-neutral-500" />
|
||||
</Link>
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-medium text-neutral-800 truncate">
|
||||
{projectName || 'Untitled'}
|
||||
</div>
|
||||
{owner?.username && (
|
||||
<Link
|
||||
href={`/u/${owner.username}`}
|
||||
className="text-xs text-neutral-500 hover:text-neutral-700 transition-colors"
|
||||
>
|
||||
@{owner.username}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
{owner?.username && (
|
||||
<Link
|
||||
href={`/u/${owner.username}`}
|
||||
className="text-xs text-neutral-500 hover:text-neutral-700 transition-colors"
|
||||
>
|
||||
@{owner.username}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Breadcrumb — only shown when navigated into a building */}
|
||||
{building && (
|
||||
<div className="border-t border-neutral-100 px-3 py-1.5">
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
<button
|
||||
onClick={() => handleBreadcrumbClick('root')}
|
||||
className="text-neutral-500 hover:text-neutral-800 transition-colors"
|
||||
>
|
||||
Site
|
||||
</button>
|
||||
|
||||
{building && (
|
||||
<>
|
||||
<ChevronRight className="w-3 h-3 text-neutral-400" />
|
||||
{/* Breadcrumb — only shown when navigated into a building */}
|
||||
{building && (
|
||||
<div className="border-t border-neutral-100 px-3 py-1.5">
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
<button
|
||||
onClick={() => handleBreadcrumbClick('building')}
|
||||
className={`transition-colors truncate ${level ? 'text-neutral-500 hover:text-neutral-800' : 'text-neutral-800 font-medium'}`}
|
||||
onClick={() => handleBreadcrumbClick('root')}
|
||||
className="text-neutral-500 hover:text-neutral-800 transition-colors"
|
||||
>
|
||||
{building.name || 'Building'}
|
||||
Site
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{level && (
|
||||
<>
|
||||
<ChevronRight className="w-3 h-3 text-neutral-400" />
|
||||
<button
|
||||
onClick={() => handleBreadcrumbClick('level')}
|
||||
className={`transition-colors truncate ${zone ? 'text-neutral-500 hover:text-neutral-800' : 'text-neutral-800 font-medium'}`}
|
||||
>
|
||||
{level.name || `Level ${level.level}`}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{building && (
|
||||
<>
|
||||
<ChevronRight className="w-3 h-3 text-neutral-400" />
|
||||
<button
|
||||
onClick={() => handleBreadcrumbClick('building')}
|
||||
className={`transition-colors truncate ${level ? 'text-neutral-500 hover:text-neutral-800' : 'text-neutral-800 font-medium'}`}
|
||||
>
|
||||
{building.name || 'Building'}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{zone && (
|
||||
<>
|
||||
<ChevronRight className="w-3 h-3 text-neutral-400" />
|
||||
<span className={`transition-colors truncate ${selectedNode ? 'text-neutral-500' : 'text-neutral-800 font-medium'}`}>
|
||||
{zone.name}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{level && (
|
||||
<>
|
||||
<ChevronRight className="w-3 h-3 text-neutral-400" />
|
||||
<button
|
||||
onClick={() => handleBreadcrumbClick('level')}
|
||||
className={`transition-colors truncate ${zone ? 'text-neutral-500 hover:text-neutral-800' : 'text-neutral-800 font-medium'}`}
|
||||
>
|
||||
{level.name || `Level ${level.level}`}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{selectedNode && zone && (
|
||||
<>
|
||||
<ChevronRight className="w-3 h-3 text-neutral-400" />
|
||||
<span className="text-neutral-800 font-medium truncate">{getNodeName(selectedNode)}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{zone && (
|
||||
<>
|
||||
<ChevronRight className="w-3 h-3 text-neutral-400" />
|
||||
<span
|
||||
className={`transition-colors truncate ${selectedNode ? 'text-neutral-500' : 'text-neutral-800 font-medium'}`}
|
||||
>
|
||||
{zone.name}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Level List (only when building is selected) */}
|
||||
{building && levels.length > 0 && (
|
||||
<div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)] w-40">
|
||||
<span className="text-xs text-neutral-500 px-2 pb-1">Levels</span>
|
||||
{levels.map((lvl) => (
|
||||
<button
|
||||
key={lvl.id}
|
||||
onClick={() => handleLevelClick(lvl.id)}
|
||||
className={`text-left px-2 py-1 rounded text-sm transition-colors ${
|
||||
lvl.id === selection.levelId
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
{lvl.name || `Level ${lvl.level}`}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Controls Panel - Top Right */}
|
||||
<div className="absolute top-4 right-4 z-10 flex flex-col gap-2">
|
||||
{/* Visibility Controls */}
|
||||
{(canShowScans || canShowGuides) && (
|
||||
<div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)]">
|
||||
<span className="text-xs text-neutral-500 px-2 pb-1">Visibility</span>
|
||||
{canShowScans && (
|
||||
<button
|
||||
onClick={() => useViewer.getState().setShowScans(!showScans)}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
showScans ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<Box className="w-4 h-4" />
|
||||
3D Scans
|
||||
</button>
|
||||
)}
|
||||
{canShowGuides && (
|
||||
<button
|
||||
onClick={() => useViewer.getState().setShowGuides(!showGuides)}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
showGuides ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<Image className="w-4 h-4" />
|
||||
Guides
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Camera Mode */}
|
||||
<div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)]">
|
||||
<span className="text-xs text-neutral-500 px-2 pb-1">Camera</span>
|
||||
<button
|
||||
onClick={() => useViewer.getState().setCameraMode(cameraMode === 'perspective' ? 'orthographic' : 'perspective')}
|
||||
className="flex items-center gap-2 px-2 py-1 rounded text-sm text-neutral-700 hover:bg-neutral-100 transition-colors"
|
||||
>
|
||||
{cameraMode === 'perspective' ? (
|
||||
<Eye className="w-4 h-4" />
|
||||
) : (
|
||||
<EyeOff className="w-4 h-4" />
|
||||
{selectedNode && zone && (
|
||||
<>
|
||||
<ChevronRight className="w-3 h-3 text-neutral-400" />
|
||||
<span className="text-neutral-800 font-medium truncate">
|
||||
{getNodeName(selectedNode)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{cameraMode === 'perspective' ? 'Perspective' : 'Orthographic'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Level List (only when building is selected) */}
|
||||
{building && levels.length > 0 && (
|
||||
<div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)] w-40">
|
||||
<span className="text-xs text-neutral-500 px-2 pb-1">Levels</span>
|
||||
{levels.map((lvl) => (
|
||||
<button
|
||||
key={lvl.id}
|
||||
onClick={() => handleLevelClick(lvl.id)}
|
||||
className={`text-left px-2 py-1 rounded text-sm transition-colors ${
|
||||
lvl.id === selection.levelId
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
{lvl.name || `Level ${lvl.level}`}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Level Mode */}
|
||||
<div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)]">
|
||||
<span className="text-xs text-neutral-500 px-2 pb-1">Level Mode</span>
|
||||
<button
|
||||
onClick={() => useViewer.getState().setLevelMode('stacked')}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
levelMode === 'stacked' ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<Layers className="w-4 h-4" />
|
||||
Stacked
|
||||
</button>
|
||||
<button
|
||||
onClick={() => useViewer.getState().setLevelMode('exploded')}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
levelMode === 'exploded' ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<Layers2 className="w-4 h-4" />
|
||||
Exploded
|
||||
</button>
|
||||
<button
|
||||
onClick={() => useViewer.getState().setLevelMode('solo')}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
levelMode === 'solo' ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<Diamond className="w-4 h-4" />
|
||||
Solo
|
||||
</button>
|
||||
</div>
|
||||
{/* Controls Panel - Top Right */}
|
||||
<div className="absolute top-4 right-4 z-20 flex flex-col gap-2">
|
||||
{/* Visibility Controls */}
|
||||
{(canShowScans || canShowGuides) && (
|
||||
<div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)]">
|
||||
<span className="text-xs text-neutral-500 px-2 pb-1">Visibility</span>
|
||||
{canShowScans && (
|
||||
<button
|
||||
onClick={() => useViewer.getState().setShowScans(!showScans)}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
showScans ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<Box className="w-4 h-4" />
|
||||
3D Scans
|
||||
</button>
|
||||
)}
|
||||
{canShowGuides && (
|
||||
<button
|
||||
onClick={() => useViewer.getState().setShowGuides(!showGuides)}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
showGuides ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<Image className="w-4 h-4" />
|
||||
Guides
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Wall Mode */}
|
||||
<div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)]">
|
||||
<span className="text-xs text-neutral-500 px-2 pb-1">Wall Mode</span>
|
||||
<button
|
||||
onClick={() => useViewer.getState().setWallMode('cutaway')}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
wallMode === 'cutaway' ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<img alt="Cutaway" height={16} src="/icons/wallcut.png" width={16} className="w-4 h-4" />
|
||||
Cutaway
|
||||
</button>
|
||||
<button
|
||||
onClick={() => useViewer.getState().setWallMode('up')}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
wallMode === 'up' ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<img alt="Full Height" height={16} src="/icons/room.png" width={16} className="w-4 h-4" />
|
||||
Full Height
|
||||
</button>
|
||||
<button
|
||||
onClick={() => useViewer.getState().setWallMode('down')}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
wallMode === 'down' ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<img alt="Low" height={16} src="/icons/walllow.png" width={16} className="w-4 h-4" />
|
||||
Low
|
||||
</button>
|
||||
{/* Camera Mode */}
|
||||
<div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)]">
|
||||
<span className="text-xs text-neutral-500 px-2 pb-1">Camera</span>
|
||||
<button
|
||||
onClick={() =>
|
||||
useViewer
|
||||
.getState()
|
||||
.setCameraMode(cameraMode === 'perspective' ? 'orthographic' : 'perspective')
|
||||
}
|
||||
className="flex items-center gap-2 px-2 py-1 rounded text-sm text-neutral-700 hover:bg-neutral-100 transition-colors"
|
||||
>
|
||||
{cameraMode === 'perspective' ? (
|
||||
<Eye className="w-4 h-4" />
|
||||
) : (
|
||||
<EyeOff className="w-4 h-4" />
|
||||
)}
|
||||
{cameraMode === 'perspective' ? 'Perspective' : 'Orthographic'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Level Mode */}
|
||||
<div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)]">
|
||||
<span className="text-xs text-neutral-500 px-2 pb-1">Level Mode</span>
|
||||
<button
|
||||
onClick={() => useViewer.getState().setLevelMode('stacked')}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
levelMode === 'stacked'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<Layers className="w-4 h-4" />
|
||||
Stacked
|
||||
</button>
|
||||
<button
|
||||
onClick={() => useViewer.getState().setLevelMode('exploded')}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
levelMode === 'exploded'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<Layers2 className="w-4 h-4" />
|
||||
Exploded
|
||||
</button>
|
||||
<button
|
||||
onClick={() => useViewer.getState().setLevelMode('solo')}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
levelMode === 'solo'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<Diamond className="w-4 h-4" />
|
||||
Solo
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Wall Mode */}
|
||||
<div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)]">
|
||||
<span className="text-xs text-neutral-500 px-2 pb-1">Wall Mode</span>
|
||||
<button
|
||||
onClick={() => useViewer.getState().setWallMode('cutaway')}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
wallMode === 'cutaway'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
alt="Cutaway"
|
||||
height={16}
|
||||
src="/icons/wallcut.png"
|
||||
width={16}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
Cutaway
|
||||
</button>
|
||||
<button
|
||||
onClick={() => useViewer.getState().setWallMode('up')}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
wallMode === 'up' ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
alt="Full Height"
|
||||
height={16}
|
||||
src="/icons/room.png"
|
||||
width={16}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
Full Height
|
||||
</button>
|
||||
<button
|
||||
onClick={() => useViewer.getState().setWallMode('down')}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
|
||||
wallMode === 'down'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<img alt="Low" height={16} src="/icons/walllow.png" width={16} className="w-4 h-4" />
|
||||
Low
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { type ZoneNode, sceneRegistry, useScene } from '@pascal-app/core'
|
||||
import { sceneRegistry, useScene, type ZoneNode } from '@pascal-app/core'
|
||||
import { useViewer } from '@pascal-app/viewer'
|
||||
import { useFrame } from '@react-three/fiber'
|
||||
|
||||
@@ -28,7 +28,13 @@ export const ViewerZoneSystem = () => {
|
||||
// Also hide the label
|
||||
const label = obj.getObjectByName('label')
|
||||
if (label) {
|
||||
label.position.y = shouldShow ? 1 : -1000
|
||||
// Hide label if zone layer is off OR if in solo mode on a different level
|
||||
const labelPosition = obj.userData.labelPosition as [number, number, number] | undefined
|
||||
if (shouldShow && labelPosition) {
|
||||
label.position.set(...labelPosition)
|
||||
} else {
|
||||
label.position.set(-9999, -9999, -9999)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -75,6 +75,15 @@ export function PascalRadio() {
|
||||
// Calculate effective volume (masterVolume * radioVolume, both are 0-100)
|
||||
const effectiveVolume = (masterVolume / 100) * (radioVolume / 100)
|
||||
|
||||
// Keep a ref so the track-init effect can read current volume/muted/isPlaying
|
||||
// without those values being part of its dependency array (which would restart the song).
|
||||
const effectiveVolumeRef = useRef(effectiveVolume)
|
||||
const mutedRef = useRef(muted)
|
||||
const isPlayingRef = useRef(isPlaying)
|
||||
effectiveVolumeRef.current = effectiveVolume
|
||||
mutedRef.current = muted
|
||||
isPlayingRef.current = isPlaying
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
setCurrentTrackIndex((prev) => (prev + 1) % shuffledPlaylist.length)
|
||||
}, [shuffledPlaylist.length])
|
||||
@@ -83,32 +92,29 @@ export function PascalRadio() {
|
||||
setCurrentTrackIndex((prev) => (prev - 1 + shuffledPlaylist.length) % shuffledPlaylist.length)
|
||||
}, [shuffledPlaylist.length])
|
||||
|
||||
// Initialize Howler when track changes
|
||||
// Initialize Howler only when the track changes — not on volume/mute/play-state changes.
|
||||
// Volume and mute are handled by the separate effect below.
|
||||
useEffect(() => {
|
||||
// Clean up previous sound
|
||||
if (soundRef.current) {
|
||||
soundRef.current.unload()
|
||||
}
|
||||
|
||||
const wasPlaying = isPlaying
|
||||
const wasPlaying = isPlayingRef.current
|
||||
|
||||
// Create new sound
|
||||
soundRef.current = new Howl({
|
||||
src: [currentTrack.file],
|
||||
volume: muted ? 0 : effectiveVolume,
|
||||
volume: mutedRef.current ? 0 : effectiveVolumeRef.current,
|
||||
onend: handleNext,
|
||||
})
|
||||
|
||||
// If was playing, play new track
|
||||
if (wasPlaying && !muted) {
|
||||
if (wasPlaying && !mutedRef.current) {
|
||||
soundRef.current?.play()
|
||||
}
|
||||
|
||||
return () => {
|
||||
soundRef.current?.unload()
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [handleNext, currentTrack.file, muted, isPlaying, effectiveVolume])
|
||||
}, [handleNext, currentTrack.file])
|
||||
|
||||
// Update volume when settings change
|
||||
useEffect(() => {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type ZoneNode, sceneRegistry, useScene } from '@pascal-app/core'
|
||||
import { sceneRegistry, useScene, type ZoneNode } from '@pascal-app/core'
|
||||
import { useViewer } from '@pascal-app/viewer'
|
||||
import { useEffect } from 'react'
|
||||
import useEditor from '@/store/use-editor'
|
||||
@@ -24,10 +24,17 @@ export const ZoneSystem = () => {
|
||||
const hideInSoloMode = levelMode === 'solo' && selectedLevelId && !isOnSelectedLevel
|
||||
|
||||
obj.visible = visible
|
||||
|
||||
const label = obj.getObjectByName('label')
|
||||
if (label) {
|
||||
// Hide label if zone layer is off OR if in solo mode on a different level
|
||||
label.position.y = (visible && !hideInSoloMode) ? 1 : -1000
|
||||
const showLabel = visible && !hideInSoloMode;
|
||||
const labelPosition = obj.userData.labelPosition as [number, number, number] | undefined
|
||||
if (showLabel && labelPosition) {
|
||||
label.position.set(...labelPosition)
|
||||
} else {
|
||||
label.position.set(-9999, -9999, -9999)
|
||||
}
|
||||
}
|
||||
})
|
||||
}, [structureLayer, levelMode, selectedLevelId])
|
||||
|
||||
@@ -2,8 +2,9 @@ import { CeilingNode, emitter, type GridEvent, type LevelNode, useScene } from '
|
||||
import { useViewer } from '@pascal-app/viewer'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { BufferGeometry, DoubleSide, type Line, type Mesh, Shape, Vector3 } from 'three'
|
||||
import useEditor from '@/store/use-editor'
|
||||
import { sfxEmitter } from '@/lib/sfx-bus'
|
||||
import useEditor from '@/store/use-editor'
|
||||
import { CursorSphere } from '../shared/cursor-sphere'
|
||||
|
||||
const CEILING_HEIGHT = 2.52
|
||||
const GRID_OFFSET = 0.02
|
||||
@@ -97,12 +98,19 @@ export const CeilingTool: React.FC = () => {
|
||||
|
||||
// Calculate snapped display position (bypass snap when Shift is held)
|
||||
const lastPoint = points[points.length - 1]
|
||||
const displayPoint = (shiftPressed.current || !lastPoint) ? gridPosition : calculateSnapPoint(lastPoint, gridPosition)
|
||||
const displayPoint =
|
||||
shiftPressed.current || !lastPoint
|
||||
? gridPosition
|
||||
: calculateSnapPoint(lastPoint, gridPosition)
|
||||
setSnappedCursorPosition(displayPoint)
|
||||
|
||||
// Play snap sound when the snapped position actually changes (only when drawing)
|
||||
if (points.length > 0 && previousSnappedPointRef.current &&
|
||||
(displayPoint[0] !== previousSnappedPointRef.current[0] || displayPoint[1] !== previousSnappedPointRef.current[1])) {
|
||||
if (
|
||||
points.length > 0 &&
|
||||
previousSnappedPointRef.current &&
|
||||
(displayPoint[0] !== previousSnappedPointRef.current[0] ||
|
||||
displayPoint[1] !== previousSnappedPointRef.current[1])
|
||||
) {
|
||||
sfxEmitter.emit('sfx:grid-snap')
|
||||
}
|
||||
|
||||
@@ -150,8 +158,12 @@ export const CeilingTool: React.FC = () => {
|
||||
setPoints([])
|
||||
}
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Shift') shiftPressed.current = true }
|
||||
const onKeyUp = (e: KeyboardEvent) => { if (e.key === 'Shift') shiftPressed.current = false }
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Shift') shiftPressed.current = true
|
||||
}
|
||||
const onKeyUp = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Shift') shiftPressed.current = false
|
||||
}
|
||||
document.addEventListener('keydown', onKeyDown)
|
||||
document.addEventListener('keyup', onKeyUp)
|
||||
|
||||
@@ -242,15 +254,12 @@ export const CeilingTool: React.FC = () => {
|
||||
return (
|
||||
<group>
|
||||
{/* Cursor at ceiling height */}
|
||||
<mesh ref={cursorRef}>
|
||||
<sphereGeometry args={[0.1, 16, 16]} />
|
||||
<meshBasicMaterial color="#d4d4d4" depthTest={false} depthWrite={false} />
|
||||
</mesh>
|
||||
<CursorSphere ref={cursorRef} />
|
||||
|
||||
{/* Grid-level cursor indicator */}
|
||||
<mesh ref={gridCursorRef} rotation={[-Math.PI / 2, 0, 0]}>
|
||||
<mesh ref={gridCursorRef} rotation={[-Math.PI / 2, 0, 0]} renderOrder={2}>
|
||||
<ringGeometry args={[0.15, 0.2, 32]} />
|
||||
<meshBasicMaterial color="#a3a3a3" side={DoubleSide} depthTest={false} depthWrite={false} />
|
||||
<meshBasicMaterial color="#a3a3a3" side={DoubleSide} depthTest={false} depthWrite={true} />
|
||||
</mesh>
|
||||
|
||||
{/* Preview fill */}
|
||||
@@ -294,14 +303,11 @@ export const CeilingTool: React.FC = () => {
|
||||
|
||||
{/* Point markers */}
|
||||
{points.map(([x, z], index) => (
|
||||
<mesh key={index} position={[x, levelY + CEILING_HEIGHT + 0.01, z]}>
|
||||
<sphereGeometry args={[0.1, 16, 16]} />
|
||||
<meshBasicMaterial
|
||||
color={index === 0 ? '#22c55e' : '#d4d4d4'}
|
||||
depthTest={false}
|
||||
depthWrite={false}
|
||||
/>
|
||||
</mesh>
|
||||
<CursorSphere
|
||||
key={index}
|
||||
position={[x, levelY + CEILING_HEIGHT + 0.01, z]}
|
||||
color={index === 0 ? '#22c55e' : undefined}
|
||||
/>
|
||||
))}
|
||||
</group>
|
||||
)
|
||||
|
||||
@@ -1,37 +1,44 @@
|
||||
import { emitter, type GridEvent, useScene, RoofNode, type LevelNode, type AnyNode } from "@pascal-app/core";
|
||||
import { useViewer } from "@pascal-app/viewer";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { BufferGeometry, DoubleSide, type Line, Vector3 } from "three";
|
||||
import useEditor from "@/store/use-editor";
|
||||
import { sfxEmitter } from '@/lib/sfx-bus';
|
||||
import {
|
||||
type AnyNode,
|
||||
emitter,
|
||||
type GridEvent,
|
||||
type LevelNode,
|
||||
RoofNode,
|
||||
useScene,
|
||||
} from '@pascal-app/core'
|
||||
import { useViewer } from '@pascal-app/viewer'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { BufferGeometry, DoubleSide, type Line, Vector3 } from 'three'
|
||||
import { sfxEmitter } from '@/lib/sfx-bus'
|
||||
import useEditor from '@/store/use-editor'
|
||||
|
||||
// Default roof dimensions
|
||||
const DEFAULT_HEIGHT = 1.5;
|
||||
const PREVIEW_LINE_HEIGHT = 0.03; // Very thin preview
|
||||
const DEFAULT_HEIGHT = 1.5
|
||||
const PREVIEW_LINE_HEIGHT = 0.03 // Very thin preview
|
||||
|
||||
/**
|
||||
* Creates a roof with the given corners
|
||||
*/
|
||||
const commitRoofPlacement = (
|
||||
levelId: LevelNode["id"],
|
||||
levelId: LevelNode['id'],
|
||||
corner1: [number, number, number],
|
||||
corner2: [number, number, number]
|
||||
): RoofNode["id"] => {
|
||||
const { createNode, nodes } = useScene.getState();
|
||||
corner2: [number, number, number],
|
||||
): RoofNode['id'] => {
|
||||
const { createNode, nodes } = useScene.getState()
|
||||
|
||||
// Calculate center position and dimensions from corners
|
||||
const centerX = (corner1[0] + corner2[0]) / 2;
|
||||
const centerZ = (corner1[2] + corner2[2]) / 2;
|
||||
const centerX = (corner1[0] + corner2[0]) / 2
|
||||
const centerZ = (corner1[2] + corner2[2]) / 2
|
||||
|
||||
const length = Math.abs(corner2[0] - corner1[0]);
|
||||
const width = Math.abs(corner2[2] - corner1[2]);
|
||||
const length = Math.abs(corner2[0] - corner1[0])
|
||||
const width = Math.abs(corner2[2] - corner1[2])
|
||||
|
||||
// Split width evenly between left and right slopes
|
||||
const slopeWidth = Math.max(width / 2, 0.5);
|
||||
const slopeWidth = Math.max(width / 2, 0.5)
|
||||
|
||||
// Count existing roofs for naming
|
||||
const roofCount = Object.values(nodes).filter((n) => n.type === "roof").length;
|
||||
const name = `Roof ${roofCount + 1}`;
|
||||
const roofCount = Object.values(nodes).filter((n) => n.type === 'roof').length
|
||||
const name = `Roof ${roofCount + 1}`
|
||||
|
||||
const roof = RoofNode.parse({
|
||||
name,
|
||||
@@ -40,151 +47,153 @@ const commitRoofPlacement = (
|
||||
height: DEFAULT_HEIGHT,
|
||||
leftWidth: slopeWidth,
|
||||
rightWidth: slopeWidth,
|
||||
});
|
||||
})
|
||||
|
||||
createNode(roof, levelId);
|
||||
sfxEmitter.emit('sfx:structure-build');
|
||||
return roof.id;
|
||||
};
|
||||
createNode(roof, levelId)
|
||||
sfxEmitter.emit('sfx:structure-build')
|
||||
return roof.id
|
||||
}
|
||||
|
||||
type PreviewState = {
|
||||
corner1: [number, number, number] | null;
|
||||
cursorPosition: [number, number, number];
|
||||
levelY: number;
|
||||
};
|
||||
corner1: [number, number, number] | null
|
||||
cursorPosition: [number, number, number]
|
||||
levelY: number
|
||||
}
|
||||
|
||||
export const RoofTool: React.FC = () => {
|
||||
const outlineRef = useRef<Line>(null!);
|
||||
const currentLevelId = useViewer((state) => state.selection.levelId);
|
||||
const setSelection = useViewer((state) => state.setSelection);
|
||||
const setTool = useEditor((state) => state.setTool);
|
||||
const setMode = useEditor((state) => state.setMode);
|
||||
const outlineRef = useRef<Line>(null!)
|
||||
const currentLevelId = useViewer((state) => state.selection.levelId)
|
||||
const setSelection = useViewer((state) => state.setSelection)
|
||||
const setTool = useEditor((state) => state.setTool)
|
||||
const setMode = useEditor((state) => state.setMode)
|
||||
|
||||
const corner1Ref = useRef<[number, number, number] | null>(null);
|
||||
const previousGridPosRef = useRef<[number, number] | null>(null);
|
||||
const corner1Ref = useRef<[number, number, number] | null>(null)
|
||||
const previousGridPosRef = useRef<[number, number] | null>(null)
|
||||
const [preview, setPreview] = useState<PreviewState>({
|
||||
corner1: null,
|
||||
cursorPosition: [0, 0, 0],
|
||||
levelY: 0,
|
||||
});
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentLevelId) return;
|
||||
if (!currentLevelId) return
|
||||
|
||||
// Initialize outline geometry
|
||||
outlineRef.current.geometry = new BufferGeometry();
|
||||
outlineRef.current.geometry = new BufferGeometry()
|
||||
|
||||
const updateOutline = (corner1: [number, number, number], corner2: [number, number, number]) => {
|
||||
const y = corner1[1] + PREVIEW_LINE_HEIGHT;
|
||||
const updateOutline = (
|
||||
corner1: [number, number, number],
|
||||
corner2: [number, number, number],
|
||||
) => {
|
||||
const y = corner1[1] + PREVIEW_LINE_HEIGHT
|
||||
const points = [
|
||||
new Vector3(corner1[0], y, corner1[2]),
|
||||
new Vector3(corner2[0], y, corner1[2]),
|
||||
new Vector3(corner2[0], y, corner2[2]),
|
||||
new Vector3(corner1[0], y, corner2[2]),
|
||||
new Vector3(corner1[0], y, corner1[2]), // Close the loop
|
||||
];
|
||||
outlineRef.current.geometry.dispose();
|
||||
outlineRef.current.geometry = new BufferGeometry().setFromPoints(points);
|
||||
outlineRef.current.visible = true;
|
||||
};
|
||||
]
|
||||
outlineRef.current.geometry.dispose()
|
||||
outlineRef.current.geometry = new BufferGeometry().setFromPoints(points)
|
||||
outlineRef.current.visible = true
|
||||
}
|
||||
|
||||
const onGridMove = (event: GridEvent) => {
|
||||
// Snap to 0.5 grid
|
||||
const gridX = Math.round(event.position[0] * 2) / 2;
|
||||
const gridZ = Math.round(event.position[2] * 2) / 2;
|
||||
const y = event.position[1];
|
||||
const gridX = Math.round(event.position[0] * 2) / 2
|
||||
const gridZ = Math.round(event.position[2] * 2) / 2
|
||||
const y = event.position[1]
|
||||
|
||||
const cursorPosition: [number, number, number] = [gridX, y, gridZ];
|
||||
const cursorPosition: [number, number, number] = [gridX, y, gridZ]
|
||||
|
||||
// Play snap sound when grid position changes (only when placing)
|
||||
if (corner1Ref.current && previousGridPosRef.current &&
|
||||
(gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])) {
|
||||
sfxEmitter.emit('sfx:grid-snap');
|
||||
if (
|
||||
corner1Ref.current &&
|
||||
previousGridPosRef.current &&
|
||||
(gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])
|
||||
) {
|
||||
sfxEmitter.emit('sfx:grid-snap')
|
||||
}
|
||||
|
||||
previousGridPosRef.current = [gridX, gridZ];
|
||||
previousGridPosRef.current = [gridX, gridZ]
|
||||
|
||||
setPreview({
|
||||
corner1: corner1Ref.current,
|
||||
cursorPosition,
|
||||
levelY: y,
|
||||
});
|
||||
})
|
||||
|
||||
// Update outline if we have first corner
|
||||
if (corner1Ref.current) {
|
||||
updateOutline(corner1Ref.current, cursorPosition);
|
||||
updateOutline(corner1Ref.current, cursorPosition)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const onGridClick = (event: GridEvent) => {
|
||||
if (!currentLevelId) return;
|
||||
if (!currentLevelId) return
|
||||
|
||||
const gridX = Math.round(event.position[0] * 2) / 2;
|
||||
const gridZ = Math.round(event.position[2] * 2) / 2;
|
||||
const y = event.position[1];
|
||||
const gridX = Math.round(event.position[0] * 2) / 2
|
||||
const gridZ = Math.round(event.position[2] * 2) / 2
|
||||
const y = event.position[1]
|
||||
|
||||
if (!corner1Ref.current) {
|
||||
// First click - set corner 1
|
||||
corner1Ref.current = [gridX, y, gridZ];
|
||||
corner1Ref.current = [gridX, y, gridZ]
|
||||
setPreview((prev) => ({
|
||||
...prev,
|
||||
corner1: corner1Ref.current,
|
||||
}));
|
||||
}))
|
||||
} else {
|
||||
// Second click - create the roof
|
||||
const roofId = commitRoofPlacement(
|
||||
currentLevelId,
|
||||
corner1Ref.current,
|
||||
[gridX, y, gridZ]
|
||||
);
|
||||
const roofId = commitRoofPlacement(currentLevelId, corner1Ref.current, [gridX, y, gridZ])
|
||||
|
||||
// Auto-select the newly created roof
|
||||
setSelection({ selectedIds: [roofId as AnyNode["id"]] });
|
||||
setSelection({ selectedIds: [roofId as AnyNode['id']] })
|
||||
|
||||
// Reset state
|
||||
corner1Ref.current = null;
|
||||
outlineRef.current.visible = false;
|
||||
corner1Ref.current = null
|
||||
outlineRef.current.visible = false
|
||||
|
||||
// Switch to select mode and deactivate tool
|
||||
setMode('select');
|
||||
setTool(null);
|
||||
setMode('select')
|
||||
setTool(null)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const onCancel = () => {
|
||||
if (corner1Ref.current) {
|
||||
corner1Ref.current = null;
|
||||
outlineRef.current.visible = false;
|
||||
setPreview((prev) => ({ ...prev, corner1: null }));
|
||||
corner1Ref.current = null
|
||||
outlineRef.current.visible = false
|
||||
setPreview((prev) => ({ ...prev, corner1: null }))
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Subscribe to events
|
||||
emitter.on("grid:move", onGridMove);
|
||||
emitter.on("grid:click", onGridClick);
|
||||
emitter.on("tool:cancel", onCancel);
|
||||
emitter.on('grid:move', onGridMove)
|
||||
emitter.on('grid:click', onGridClick)
|
||||
emitter.on('tool:cancel', onCancel)
|
||||
|
||||
return () => {
|
||||
emitter.off("grid:move", onGridMove);
|
||||
emitter.off("grid:click", onGridClick);
|
||||
emitter.off("tool:cancel", onCancel);
|
||||
emitter.off('grid:move', onGridMove)
|
||||
emitter.off('grid:click', onGridClick)
|
||||
emitter.off('tool:cancel', onCancel)
|
||||
|
||||
// Reset state on unmount
|
||||
corner1Ref.current = null;
|
||||
};
|
||||
}, [currentLevelId, setTool, setSelection, setMode]);
|
||||
corner1Ref.current = null
|
||||
}
|
||||
}, [currentLevelId, setTool, setSelection, setMode])
|
||||
|
||||
const { corner1, cursorPosition, levelY } = preview;
|
||||
const { corner1, cursorPosition, levelY } = preview
|
||||
|
||||
// Calculate preview dimensions for display
|
||||
const previewDimensions = useMemo(() => {
|
||||
if (!corner1) return null;
|
||||
const length = Math.abs(cursorPosition[0] - corner1[0]);
|
||||
const width = Math.abs(cursorPosition[2] - corner1[2]);
|
||||
const centerX = (corner1[0] + cursorPosition[0]) / 2;
|
||||
const centerZ = (corner1[2] + cursorPosition[2]) / 2;
|
||||
return { length, width, centerX, centerZ };
|
||||
}, [corner1, cursorPosition]);
|
||||
if (!corner1) return null
|
||||
const length = Math.abs(cursorPosition[0] - corner1[0])
|
||||
const width = Math.abs(cursorPosition[2] - corner1[2])
|
||||
const centerX = (corner1[0] + cursorPosition[0]) / 2
|
||||
const centerZ = (corner1[2] + cursorPosition[2]) / 2
|
||||
return { length, width, centerX, centerZ }
|
||||
}, [corner1, cursorPosition])
|
||||
|
||||
return (
|
||||
<group>
|
||||
@@ -192,34 +201,25 @@ export const RoofTool: React.FC = () => {
|
||||
{/* @ts-ignore */}
|
||||
<line ref={outlineRef} frustumCulled={false} renderOrder={1} visible={false}>
|
||||
<bufferGeometry />
|
||||
<lineBasicNodeMaterial
|
||||
color="#8b4513"
|
||||
linewidth={2}
|
||||
depthTest={false}
|
||||
depthWrite={false}
|
||||
/>
|
||||
<lineBasicNodeMaterial color="#8b4513" linewidth={2} depthTest={false} depthWrite={false} />
|
||||
</line>
|
||||
|
||||
{/* First corner marker */}
|
||||
{corner1 && (
|
||||
<mesh position={[corner1[0], levelY + 0.02, corner1[2]]} rotation={[-Math.PI / 2, 0, 0]}>
|
||||
<mesh position={[corner1[0], levelY + 0.02, corner1[2]]} rotation={[-Math.PI / 2, 0, 0]} renderOrder={2}>
|
||||
<ringGeometry args={[0.1, 0.15, 32]} />
|
||||
<meshBasicMaterial
|
||||
color="#22c55e"
|
||||
depthTest={false}
|
||||
depthWrite={false}
|
||||
/>
|
||||
<meshBasicMaterial color="#22c55e" depthTest={false} depthWrite={true} />
|
||||
</mesh>
|
||||
)}
|
||||
|
||||
{/* Cursor marker on ground */}
|
||||
<mesh position={[cursorPosition[0], cursorPosition[1] + 0.02, cursorPosition[2]]} rotation={[-Math.PI / 2, 0, 0]}>
|
||||
<mesh
|
||||
position={[cursorPosition[0], cursorPosition[1] + 0.02, cursorPosition[2]]}
|
||||
rotation={[-Math.PI / 2, 0, 0]}
|
||||
renderOrder={2}
|
||||
>
|
||||
<ringGeometry args={[0.1, 0.15, 32]} />
|
||||
<meshBasicMaterial
|
||||
color="#8b4513"
|
||||
depthTest={false}
|
||||
depthWrite={false}
|
||||
/>
|
||||
<meshBasicMaterial color="#8b4513" depthTest={false} depthWrite={true} />
|
||||
</mesh>
|
||||
|
||||
{/* Thin preview fill when drawing */}
|
||||
@@ -240,5 +240,5 @@ export const RoofTool: React.FC = () => {
|
||||
</mesh>
|
||||
)}
|
||||
</group>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import type { ThreeElements } from '@react-three/fiber'
|
||||
import { forwardRef } from 'react'
|
||||
import type { Mesh } from 'three'
|
||||
|
||||
interface CursorSphereProps extends Omit<ThreeElements['mesh'], 'ref'> {
|
||||
color?: string
|
||||
depthWrite?: boolean
|
||||
}
|
||||
|
||||
export const CursorSphere = forwardRef<Mesh, CursorSphereProps>(function CursorSphere(
|
||||
{ color = '#f1c066', ...props },
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<mesh ref={ref} {...props} renderOrder={2}>
|
||||
<sphereGeometry args={[0.1, 16, 16]} />
|
||||
<meshBasicMaterial color={color} depthTest={false} depthWrite={true} />
|
||||
</mesh>
|
||||
)
|
||||
})
|
||||
@@ -3,6 +3,7 @@ import { useViewer } from '@pascal-app/viewer'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { BufferGeometry, DoubleSide, type Line, type Mesh, Shape, Vector3 } from 'three'
|
||||
import { sfxEmitter } from '@/lib/sfx-bus'
|
||||
import { CursorSphere } from '../shared/cursor-sphere'
|
||||
|
||||
const Y_OFFSET = 0.02
|
||||
|
||||
@@ -236,10 +237,7 @@ export const SlabTool: React.FC = () => {
|
||||
return (
|
||||
<group>
|
||||
{/* Cursor */}
|
||||
<mesh ref={cursorRef}>
|
||||
<sphereGeometry args={[0.1, 16, 16]} />
|
||||
<meshBasicMaterial color="#a3a3a3" depthTest={false} depthWrite={false} />
|
||||
</mesh>
|
||||
<CursorSphere ref={cursorRef} />
|
||||
|
||||
{/* Preview fill */}
|
||||
{previewShape && (
|
||||
@@ -282,14 +280,7 @@ export const SlabTool: React.FC = () => {
|
||||
|
||||
{/* Point markers */}
|
||||
{points.map(([x, z], index) => (
|
||||
<mesh key={index} position={[x, levelY + Y_OFFSET + 0.01, z]}>
|
||||
<sphereGeometry args={[0.1, 16, 16]} />
|
||||
<meshBasicMaterial
|
||||
color={index === 0 ? '#22c55e' : '#a3a3a3'}
|
||||
depthTest={false}
|
||||
depthWrite={false}
|
||||
/>
|
||||
</mesh>
|
||||
<CursorSphere key={index} position={[x, levelY + Y_OFFSET + 0.01, z]} color={index === 0 ? '#22c55e' : undefined} />
|
||||
))}
|
||||
</group>
|
||||
)
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useViewer } from '@pascal-app/viewer'
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { DoubleSide, type Mesh, Shape, ShapeGeometry, Vector3 } from 'three'
|
||||
import { sfxEmitter } from '@/lib/sfx-bus'
|
||||
import { CursorSphere } from '../shared/cursor-sphere'
|
||||
|
||||
const WALL_HEIGHT = 2.5
|
||||
const WALL_THICKNESS = 0.15
|
||||
@@ -183,10 +184,7 @@ export const WallTool: React.FC = () => {
|
||||
return (
|
||||
<group>
|
||||
{/* Cursor indicator */}
|
||||
<mesh ref={cursorRef}>
|
||||
<sphereGeometry args={[0.1, 16, 16]} />
|
||||
<meshBasicMaterial color="#a3a3a3" depthTest={false} depthWrite={false} />
|
||||
</mesh>
|
||||
<CursorSphere ref={cursorRef} />
|
||||
|
||||
{/* Wall preview */}
|
||||
<mesh ref={wallPreviewRef} visible={false} renderOrder={1}>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useViewer } from "@pascal-app/viewer";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { BufferGeometry, DoubleSide, type Line, type Mesh, Shape, Vector3 } from "three";
|
||||
import useEditor from "@/store/use-editor";
|
||||
import { CursorSphere } from "../shared/cursor-sphere";
|
||||
|
||||
// Zone colors for cycling through
|
||||
const ZONE_COLORS = [
|
||||
@@ -317,14 +318,7 @@ export const ZoneTool: React.FC = () => {
|
||||
return (
|
||||
<group>
|
||||
{/* Cursor */}
|
||||
<mesh ref={cursorRef}>
|
||||
<sphereGeometry args={[0.1, 16, 16]} />
|
||||
<meshBasicMaterial
|
||||
color="#3b82f6"
|
||||
depthTest={false}
|
||||
depthWrite={false}
|
||||
/>
|
||||
</mesh>
|
||||
<CursorSphere ref={cursorRef} color="#3b82f6" />
|
||||
|
||||
{/* Preview fill */}
|
||||
{previewShape && (
|
||||
@@ -373,14 +367,7 @@ export const ZoneTool: React.FC = () => {
|
||||
{/* Point markers */}
|
||||
{points.map(([x, z], index) =>
|
||||
isValidPoint([x, z]) ? (
|
||||
<mesh key={index} position={[x, levelY + Y_OFFSET + 0.01, z]}>
|
||||
<sphereGeometry args={[0.1, 16, 16]} />
|
||||
<meshBasicMaterial
|
||||
color={index === 0 ? "#22c55e" : "#3b82f6"}
|
||||
depthTest={false}
|
||||
depthWrite={false}
|
||||
/>
|
||||
</mesh>
|
||||
<CursorSphere key={index} position={[x, levelY + Y_OFFSET + 0.01, z]} color={index === 0 ? "#22c55e" : "#3b82f6"} />
|
||||
) : null
|
||||
)}
|
||||
</group>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import {
|
||||
type AnyNodeId,
|
||||
type BuildingNode,
|
||||
emitter,
|
||||
LevelNode,
|
||||
@@ -225,20 +226,122 @@ function PropertyLineSection() {
|
||||
// SITE PHASE VIEW - Property line + building buttons
|
||||
// ============================================================================
|
||||
|
||||
function CameraPopover({
|
||||
nodeId,
|
||||
hasCamera,
|
||||
open,
|
||||
onOpenChange,
|
||||
buttonClassName,
|
||||
}: {
|
||||
nodeId: AnyNodeId;
|
||||
hasCamera: boolean;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
buttonClassName?: string;
|
||||
}) {
|
||||
const updateNode = useScene((state) => state.updateNode);
|
||||
return (
|
||||
<Popover open={open} onOpenChange={onOpenChange}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
className={cn(
|
||||
"relative w-6 h-6 flex items-center justify-center rounded cursor-pointer",
|
||||
buttonClassName
|
||||
)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
title="Camera snapshot"
|
||||
>
|
||||
<Camera className="w-3.5 h-3.5" />
|
||||
{hasCamera && (
|
||||
<span className="absolute top-0.5 right-0.5 w-1.5 h-1.5 rounded-full bg-primary" />
|
||||
)}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
side="right"
|
||||
align="start"
|
||||
className="w-auto p-1"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{hasCamera && (
|
||||
<button
|
||||
className="flex items-center gap-2 px-2 py-1.5 text-sm rounded cursor-pointer text-popover-foreground hover:bg-accent text-left w-full"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
emitter.emit("camera-controls:view", { nodeId });
|
||||
onOpenChange(false);
|
||||
}}
|
||||
>
|
||||
<Camera className="w-3.5 h-3.5" />
|
||||
View snapshot
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="flex items-center gap-2 px-2 py-1.5 text-sm rounded cursor-pointer text-popover-foreground hover:bg-accent text-left w-full"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
emitter.emit("camera-controls:capture", { nodeId });
|
||||
onOpenChange(false);
|
||||
}}
|
||||
>
|
||||
<Camera className="w-3.5 h-3.5" />
|
||||
{hasCamera ? "Update snapshot" : "Take snapshot"}
|
||||
</button>
|
||||
{hasCamera && (
|
||||
<button
|
||||
className="flex items-center gap-2 px-2 py-1.5 text-sm rounded cursor-pointer text-popover-foreground hover:bg-destructive hover:text-destructive-foreground text-left w-full"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
updateNode(nodeId, { camera: undefined });
|
||||
onOpenChange(false);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
Clear snapshot
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
function SitePhaseView() {
|
||||
const nodes = useScene((state) => state.nodes);
|
||||
const rootNodeIds = useScene((state) => state.rootNodeIds);
|
||||
const updateNode = useScene((state) => state.updateNode);
|
||||
const selectedBuildingId = useViewer((state) => state.selection.buildingId);
|
||||
const setSelection = useViewer((state) => state.setSelection);
|
||||
const [siteCameraOpen, setSiteCameraOpen] = useState(false);
|
||||
const [buildingCameraOpen, setBuildingCameraOpen] = useState<string | null>(null);
|
||||
|
||||
// Get site node and its building children
|
||||
const siteNode = rootNodeIds[0] ? nodes[rootNodeIds[0]] : null;
|
||||
const buildings = (siteNode?.type === 'site' ? siteNode.children : [])
|
||||
.map((child) => typeof child === 'string' ? nodes[child] : child)
|
||||
.map((child) => {
|
||||
const id = typeof child === 'string' ? child : child.id;
|
||||
return nodes[id] as BuildingNode | undefined;
|
||||
})
|
||||
.filter((node): node is BuildingNode => node?.type === "building");
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Site row */}
|
||||
{siteNode && (
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b border-border/50">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">{siteNode.name || "Site"}</span>
|
||||
</div>
|
||||
<CameraPopover
|
||||
nodeId={siteNode.id as AnyNodeId}
|
||||
hasCamera={!!siteNode.camera}
|
||||
open={siteCameraOpen}
|
||||
onOpenChange={setSiteCameraOpen}
|
||||
buttonClassName="hover:bg-accent text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<PropertyLineSection />
|
||||
{buildings.length === 0 ? (
|
||||
<div className="px-3 py-4 text-sm text-muted-foreground">
|
||||
@@ -247,19 +350,91 @@ function SitePhaseView() {
|
||||
) : (
|
||||
<div className="flex flex-col gap-1 p-2">
|
||||
{buildings.map((building) => (
|
||||
<button
|
||||
<div
|
||||
key={building.id}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors cursor-pointer",
|
||||
"group/building flex items-center rounded-md text-sm transition-colors",
|
||||
selectedBuildingId === building.id
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-accent/50 hover:bg-accent text-foreground"
|
||||
)}
|
||||
onClick={() => setSelection({ buildingId: building.id })}
|
||||
>
|
||||
<Building2 className="w-4 h-4 shrink-0" />
|
||||
<span className="truncate">{building.name || "Building"}</span>
|
||||
</button>
|
||||
<button
|
||||
className="flex-1 flex items-center gap-2 px-3 py-2 cursor-pointer min-w-0"
|
||||
onClick={() => setSelection({ buildingId: building.id })}
|
||||
>
|
||||
<Building2 className="w-4 h-4 shrink-0" />
|
||||
<span className="truncate">{building.name || "Building"}</span>
|
||||
</button>
|
||||
<Popover
|
||||
open={buildingCameraOpen === building.id}
|
||||
onOpenChange={(open) => setBuildingCameraOpen(open ? building.id : null)}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
className={cn(
|
||||
"relative opacity-0 group-hover/building:opacity-100 w-6 h-6 mr-1 flex items-center justify-center rounded cursor-pointer shrink-0",
|
||||
selectedBuildingId === building.id
|
||||
? "hover:bg-primary-foreground/20"
|
||||
: "hover:bg-accent-foreground/10"
|
||||
)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
title="Camera snapshot"
|
||||
>
|
||||
<Camera className="w-3.5 h-3.5" />
|
||||
{building.camera && (
|
||||
<span className="absolute top-0.5 right-0.5 w-1.5 h-1.5 rounded-full bg-primary" />
|
||||
)}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
side="right"
|
||||
align="start"
|
||||
className="w-auto p-1"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{building.camera && (
|
||||
<button
|
||||
className="flex items-center gap-2 px-2 py-1.5 text-sm rounded cursor-pointer text-popover-foreground hover:bg-accent text-left w-full"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
emitter.emit("camera-controls:view", { nodeId: building.id });
|
||||
setBuildingCameraOpen(null);
|
||||
}}
|
||||
>
|
||||
<Camera className="w-3.5 h-3.5" />
|
||||
View snapshot
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="flex items-center gap-2 px-2 py-1.5 text-sm rounded cursor-pointer text-popover-foreground hover:bg-accent text-left w-full"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
emitter.emit("camera-controls:capture", { nodeId: building.id });
|
||||
setBuildingCameraOpen(null);
|
||||
}}
|
||||
>
|
||||
<Camera className="w-3.5 h-3.5" />
|
||||
{building.camera ? "Update snapshot" : "Take snapshot"}
|
||||
</button>
|
||||
{building.camera && (
|
||||
<button
|
||||
className="flex items-center gap-2 px-2 py-1.5 text-sm rounded cursor-pointer text-popover-foreground hover:bg-destructive hover:text-destructive-foreground text-left w-full"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
updateNode(building.id, { camera: undefined });
|
||||
setBuildingCameraOpen(null);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
Clear snapshot
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
@@ -280,7 +455,10 @@ function BuildingSelector() {
|
||||
// Get site node and its building children
|
||||
const siteNode = rootNodeIds[0] ? nodes[rootNodeIds[0]] : null;
|
||||
const buildings = (siteNode?.type === 'site' ? siteNode.children : [])
|
||||
.map((child) => typeof child === 'string' ? nodes[child] : child)
|
||||
.map((child) => {
|
||||
const id = typeof child === 'string' ? child : child.id;
|
||||
return nodes[id] as BuildingNode | undefined;
|
||||
})
|
||||
.filter((node): node is BuildingNode => node?.type === "building");
|
||||
|
||||
const selectedBuilding = selectedBuildingId
|
||||
|
||||
Reference in New Issue
Block a user