diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx index 3fc7853f..d06771b5 100755 --- a/packages/editor/src/components/editor/floating-action-menu.tsx +++ b/packages/editor/src/components/editor/floating-action-menu.tsx @@ -49,8 +49,10 @@ export function FloatingActionMenu() { const mode = useEditor((s) => s.mode) const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered) const movingWallEndpoint = useEditor((s) => s.movingWallEndpoint) + const movingFenceEndpoint = useEditor((s) => s.movingFenceEndpoint) const setMovingNode = useEditor((s) => s.setMovingNode) const setMovingWallEndpoint = useEditor((s) => s.setMovingWallEndpoint) + const setMovingFenceEndpoint = useEditor((s) => s.setMovingFenceEndpoint) const setCurvingWall = useEditor((s) => s.setCurvingWall) const setSelection = useViewer((s) => s.setSelection) const setEditingHole = useEditor((s) => s.setEditingHole) @@ -128,12 +130,17 @@ export function FloatingActionMenu() { groupRef.current.position.set(center.x, box.max.y + yOffset, center.z) } - if (node?.type === 'wall') { - const wall = node as WallNode - const wallLength = Math.hypot(wall.end[0] - wall.start[0], wall.end[1] - wall.start[1]) + if (node?.type === 'wall' || node?.type === 'fence') { + const segment = node as WallNode | FenceNode + const segmentLength = Math.hypot( + segment.end[0] - segment.start[0], + segment.end[1] - segment.start[1], + ) const endpointYOffset = 0.35 - const startWorld = obj.localToWorld(new THREE.Vector3(0, 0, 0)) - const endWorld = obj.localToWorld(new THREE.Vector3(wallLength, 0, 0)) + const startLocalX = node.type === 'wall' ? 0 : -segmentLength / 2 + const endLocalX = node.type === 'wall' ? segmentLength : segmentLength / 2 + const startWorld = obj.localToWorld(new THREE.Vector3(startLocalX, 0, 0)) + const endWorld = obj.localToWorld(new THREE.Vector3(endLocalX, 0, 0)) if (startEndpointGroupRef.current) { startEndpointGroupRef.current.position.set( @@ -190,12 +197,18 @@ export function FloatingActionMenu() { const handleEndpointMove = useCallback( (endpoint: 'start' | 'end', e: React.MouseEvent) => { e.stopPropagation() - if (!(node && node.type === 'wall')) return + if (!node) return sfxEmitter.emit('sfx:item-pick') - setMovingWallEndpoint({ wall: node, endpoint }) + if (node.type === 'wall') { + setMovingWallEndpoint({ wall: node, endpoint }) + } else if (node.type === 'fence') { + setMovingFenceEndpoint({ fence: node, endpoint }) + } else { + return + } setSelection({ selectedIds: [] }) }, - [node, setMovingWallEndpoint, setSelection], + [node, setMovingFenceEndpoint, setMovingWallEndpoint, setSelection], ) const handleDuplicate = useCallback( @@ -396,7 +409,8 @@ export function FloatingActionMenu() { if ( !(selectedId && node && isValidType && !isFloorplanHovered && mode !== 'delete') || - movingWallEndpoint + movingWallEndpoint || + movingFenceEndpoint ) return null @@ -426,7 +440,7 @@ export function FloatingActionMenu() { /> - {node?.type === 'wall' && ( + {(node?.type === 'wall' || node?.type === 'fence') && ( <>