48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { resolveLevelId, type CeilingNode, useScene } from '@pascal-app/core'
|
|
import { useViewer } from '@pascal-app/viewer'
|
|
import { useCallback } from 'react'
|
|
import { PolygonEditor } from '../shared/polygon-editor'
|
|
|
|
interface CeilingHoleEditorProps {
|
|
ceilingId: CeilingNode['id']
|
|
holeIndex: number
|
|
}
|
|
|
|
/**
|
|
* Ceiling hole editor - allows editing a specific hole polygon within a ceiling
|
|
* Uses the generic PolygonEditor component
|
|
*/
|
|
export const CeilingHoleEditor: React.FC<CeilingHoleEditorProps> = ({ ceilingId, holeIndex }) => {
|
|
const ceilingNode = useScene((state) => state.nodes[ceilingId])
|
|
const updateNode = useScene((state) => state.updateNode)
|
|
const setSelection = useViewer((state) => state.setSelection)
|
|
|
|
const ceiling = ceilingNode?.type === 'ceiling' ? (ceilingNode as CeilingNode) : null
|
|
const holes = ceiling?.holes || []
|
|
const hole = holes[holeIndex]
|
|
|
|
const handlePolygonChange = useCallback(
|
|
(newPolygon: Array<[number, number]>) => {
|
|
const updatedHoles = [...holes]
|
|
updatedHoles[holeIndex] = newPolygon
|
|
updateNode(ceilingId, { holes: updatedHoles })
|
|
// Re-assert selection so the ceiling stays selected after the edit
|
|
setSelection({ selectedIds: [ceilingId] })
|
|
},
|
|
[ceilingId, holeIndex, holes, updateNode, setSelection],
|
|
)
|
|
|
|
if (!ceiling || !hole || hole.length < 3) return null
|
|
|
|
return (
|
|
<PolygonEditor
|
|
polygon={hole}
|
|
color="#ef4444" // red for holes
|
|
onPolygonChange={handlePolygonChange}
|
|
minVertices={3}
|
|
levelId={resolveLevelId(ceiling, useScene.getState().nodes)}
|
|
surfaceHeight={ceiling.height ?? 2.5}
|
|
/>
|
|
)
|
|
}
|