Add floorplan side resizing handles

This commit is contained in:
sudhir
2026-05-06 14:18:44 +05:30
parent 70933adf9d
commit d403606b72
4 changed files with 744 additions and 48 deletions
File diff suppressed because it is too large Load Diff
@@ -31,6 +31,7 @@ export const CeilingBoundaryEditor: React.FC<CeilingBoundaryEditorProps> = ({ ce
return ( return (
<PolygonEditor <PolygonEditor
allowEdgeMove
color="#d4d4d4" color="#d4d4d4"
levelId={resolveLevelId(ceiling, useScene.getState().nodes)} levelId={resolveLevelId(ceiling, useScene.getState().nodes)}
minVertices={3} minVertices={3}
@@ -36,6 +36,7 @@ export const CeilingHoleEditor: React.FC<CeilingHoleEditorProps> = ({ ceilingId,
return ( return (
<PolygonEditor <PolygonEditor
allowEdgeMove
allowPolygonMove allowPolygonMove
color="#ef4444" color="#ef4444"
levelId={resolveLevelId(ceiling, useScene.getState().nodes)} // red for holes levelId={resolveLevelId(ceiling, useScene.getState().nodes)} // red for holes
@@ -355,6 +355,8 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
if (displayPolygon.length < minVertices) return null if (displayPolygon.length < minVertices) return null
const canDelete = displayPolygon.length > minVertices const canDelete = displayPolygon.length > minVertices
const handleHeight = Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02)
const edgeHandleY = editY + handleHeight - EDGE_HANDLE_HEIGHT / 2
const editorContent = ( const editorContent = (
<group> <group>
@@ -383,7 +385,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
const isHovered = hoveredVertex === index const isHovered = hoveredVertex === index
const isDragging = dragState?.mode === 'vertex' && dragState.vertexIndex === index const isDragging = dragState?.mode === 'vertex' && dragState.vertexIndex === index
const radius = 0.1 const radius = 0.1
const height = Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02) const height = handleHeight
return ( return (
<mesh <mesh
@@ -453,11 +455,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
pointerId: e.pointerId, pointerId: e.pointerId,
}) })
}} }}
position={[ position={[polygonCenter[0], editY + handleHeight + 0.08, polygonCenter[1]]}
polygonCenter[0],
editY + Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02) + 0.08,
polygonCenter[1],
]}
> >
<sphereGeometry args={[0.09, 20, 20]} /> <sphereGeometry args={[0.09, 20, 20]} />
<meshStandardMaterial color={dragState?.mode === 'polygon' ? '#22c55e' : '#f59e0b'} /> <meshStandardMaterial color={dragState?.mode === 'polygon' ? '#22c55e' : '#f59e0b'} />
@@ -507,7 +505,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
e.stopPropagation() e.stopPropagation()
setHoveredEdge(null) setHoveredEdge(null)
}} }}
position={[midpoint[0], editY + EDGE_HANDLE_HEIGHT / 2, midpoint[1]]} position={[midpoint[0], edgeHandleY, midpoint[1]]}
rotation={[0, rotationY, 0]} rotation={[0, rotationY, 0]}
> >
<boxGeometry args={[length, EDGE_HANDLE_HEIGHT, EDGE_HANDLE_THICKNESS]} /> <boxGeometry args={[length, EDGE_HANDLE_HEIGHT, EDGE_HANDLE_THICKNESS]} />
@@ -525,7 +523,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
midpoints.map(([x, z], index) => { midpoints.map(([x, z], index) => {
const isHovered = hoveredMidpoint === index const isHovered = hoveredMidpoint === index
const radius = 0.06 const radius = 0.06
const height = Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02) const height = handleHeight
return ( return (
<mesh <mesh