fix(editor): wall-item placement & floorplan polish
Polish pass on the placement/interaction overhaul. Five fixes: - Item-on-item rotation box: the cursor box held the host-local yaw instead of world yaw, so it diverged from the item by the host's rotation when stacked on another item (fine on the floor). The box now derives world yaw from the mesh/host quaternion in both the R/T handler and the move-start sync. - 2D floorplan move now respects the snapping mode (parity with 3D): grid quantization only in grid mode, alignment guides only in lines/magnetic mode; Shift/Alt no longer hard-bypass. Item move also plays the move "tick" SFX on any resolved-position change, like the 3D move. - Wall-side item footprint side: the 2D footprint depth offset extended toward the wall (centerLocalZ -depth/2) instead of into the room, mirroring the item across the wall; flipped to +depth/2. Aligned the undefined-side anchor to the 3D convention (front +1 / else -1). - 3D placement preview side: the wall-side preview bounds + base plane used a -Z (into-wall) convention; flipped to +Z (into-room) to match the body and the fixed 2D footprint. The 2D live preview during a 3D wall placement now publishes the plan rotation (wall angle + item yaw) instead of the world cursor yaw, which was pi off on a wall face and flipped the footprint to the far side. - Cmd/Ctrl+R no longer rotates/flips the selected node (it reaches the browser reload); guard added to the global selected-node handler and the 2D move overlay. Verified: core/editor/nodes tsc, biome, editor 162/0 + nodes 292/0 tests. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Wassim SAMAD
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
9084396a82
commit
ba464ef47e
@@ -125,6 +125,10 @@ export function FloorplanRegistryMoveOverlay() {
|
||||
// to be consumed. That legacy flow is gone in the registry layer;
|
||||
// all entries use the action menu now.
|
||||
let hasMovedSinceStart = false
|
||||
// Last resolved position of the moved node — drives the move "tick" SFX.
|
||||
// Parity with the 3D move, which emits on any change of the resolved
|
||||
// position (every snapping mode, not only grid).
|
||||
let lastSnapKey: string | null = null
|
||||
// Live cursor location — updated on EVERY pointermove (even over the 3D
|
||||
// canvas) so R-key ownership can follow the pointer's CURRENT pane rather
|
||||
// than the sticky `hasMovedSinceStart`. Without this, once the user touched
|
||||
@@ -155,6 +159,19 @@ export function FloorplanRegistryMoveOverlay() {
|
||||
metaKey: event.metaKey,
|
||||
},
|
||||
})
|
||||
// Move "tick" — same feedback the 3D move gives, which fires whenever the
|
||||
// resolved position changes (any snapping mode, not just grid), so it
|
||||
// ticks as the item lands on each new snapped/free position.
|
||||
const movedId = session.affectedIds[0]
|
||||
const moved = movedId ? useScene.getState().nodes[movedId] : undefined
|
||||
const pos = (moved as { position?: [number, number, number] } | undefined)?.position
|
||||
if (pos) {
|
||||
const key = `${pos[0]},${pos[2]}`
|
||||
if (key !== lastSnapKey) {
|
||||
lastSnapKey = key
|
||||
sfxEmitter.emit('sfx:grid-snap')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const commitFinalStateOrRevert = () => {
|
||||
@@ -307,6 +324,8 @@ export function FloorplanRegistryMoveOverlay() {
|
||||
// `hasMovedSinceStart`-only gate made the overlay claim R forever after
|
||||
// the first 2D move, killing the 3D flip.)
|
||||
if (event.key === 'r' || event.key === 'R') {
|
||||
// Yield Cmd/Ctrl+R to the browser reload instead of flipping the side.
|
||||
if (event.metaKey || event.ctrlKey) return
|
||||
if (!(session.flipSide && hasMovedSinceStart && pointerOverFloorplan)) return
|
||||
if (event.repeat) return
|
||||
const t = event.target as HTMLElement | null
|
||||
|
||||
@@ -94,8 +94,9 @@ const RIGHT_CLICK_CANCEL_MAX_MS = 200
|
||||
* Expand `bounds` outward so each axis is rounded up to the active grid step.
|
||||
* The wireframe stays centered on the original bounds centre on each axis we
|
||||
* expand, so an off-centre mesh bbox stays off-centre. Wall-side items keep
|
||||
* `max.z = 0` (flush with the wall plane); the bottom (`min.y`) is preserved
|
||||
* so the box still sits on the floor / attachment plane.
|
||||
* `min.z = 0` (the mounted face flush with the wall plane) and extend into the
|
||||
* room along +Z — matching the body and the 2D footprint; the bottom (`min.y`)
|
||||
* is preserved so the box still sits on the floor / attachment plane.
|
||||
*
|
||||
* Floor / ceiling / item-surface: X and Z expand; Y stays exact.
|
||||
* Wall / wall-side: X and Y expand; Z stays exact.
|
||||
@@ -121,9 +122,9 @@ function expandBoundsToGrid(
|
||||
let maxZ: number
|
||||
let newCz: number
|
||||
if (attachTo === 'wall-side') {
|
||||
maxZ = 0
|
||||
minZ = -expandedD
|
||||
newCz = -expandedD / 2
|
||||
minZ = 0
|
||||
maxZ = expandedD
|
||||
newCz = expandedD / 2
|
||||
} else {
|
||||
minZ = cz - expandedD / 2
|
||||
maxZ = cz + expandedD / 2
|
||||
@@ -145,10 +146,10 @@ function getFallbackPreviewBounds(
|
||||
): PreviewBounds {
|
||||
const dims = item ? getScaledDimensions(item) : (asset?.dimensions ?? DEFAULT_DIMENSIONS)
|
||||
return {
|
||||
min: [-dims[0] / 2, 0, attachTo === 'wall-side' ? -dims[2] : -dims[2] / 2],
|
||||
max: [dims[0] / 2, dims[1], attachTo === 'wall-side' ? 0 : dims[2] / 2],
|
||||
min: [-dims[0] / 2, 0, attachTo === 'wall-side' ? 0 : -dims[2] / 2],
|
||||
max: [dims[0] / 2, dims[1], attachTo === 'wall-side' ? dims[2] : dims[2] / 2],
|
||||
dimensions: dims,
|
||||
center: [0, dims[1] / 2, attachTo === 'wall-side' ? -dims[2] / 2 : 0],
|
||||
center: [0, dims[1] / 2, attachTo === 'wall-side' ? dims[2] / 2 : 0],
|
||||
}
|
||||
}
|
||||
|
||||
@@ -690,8 +691,14 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
|
||||
const localPos = worldToBuildingLocal(worldPos.x, worldPos.y, worldPos.z)
|
||||
if (cursorGroupRef.current) {
|
||||
cursorGroupRef.current.position.copy(localPos)
|
||||
if (draftNode.current.asset.attachTo) {
|
||||
// Wall/ceiling items: extract world Y rotation (handles wall-parented items correctly)
|
||||
if (
|
||||
draftNode.current.asset.attachTo ||
|
||||
placementState.current?.surface === 'item-surface'
|
||||
) {
|
||||
// Wall/ceiling items AND items hosted on another item: the mesh is parented
|
||||
// to a rotated host, so the box's building-local yaw must come from the mesh's
|
||||
// world rotation, not the node's host-local `rotation[1]` (which would leave the
|
||||
// box rotated by the host's yaw relative to the item).
|
||||
const q = new Quaternion()
|
||||
mesh.getWorldQuaternion(q)
|
||||
cursorGroupRef.current.rotation.y = new Euler().setFromQuaternion(q, 'YXZ').y
|
||||
@@ -1094,10 +1101,24 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
|
||||
}
|
||||
}
|
||||
|
||||
// Publish live transform for 2D floorplan
|
||||
// Publish live transform for the 2D floorplan. The floorplan resolves a
|
||||
// wall item's footprint (and its wall-side depth offset) from this
|
||||
// rotation as a PLAN-space yaw. `cursorRotationY` is the 3D world cursor
|
||||
// yaw, which is π off from the plan rotation on a wall face — feeding it
|
||||
// raw flips the footprint to the far side of the wall during placement.
|
||||
// Publish the plan rotation (wall angle + the item's wall-local yaw) so
|
||||
// the preview matches what the committed node resolves to.
|
||||
let liveRotation = result.cursorRotationY
|
||||
const liveWallId = placementState.current.wallId
|
||||
const liveWall = liveWallId ? useScene.getState().nodes[liveWallId as AnyNodeId] : undefined
|
||||
if (liveWall?.type === 'wall') {
|
||||
const w = liveWall as WallNode
|
||||
const wallPlanRotation = -Math.atan2(w.end[1] - w.start[1], w.end[0] - w.start[0])
|
||||
liveRotation = wallPlanRotation + (draft.rotation[1] ?? 0)
|
||||
}
|
||||
useLiveTransforms.getState().set(draft.id, {
|
||||
position: result.cursorPosition,
|
||||
rotation: result.cursorRotationY,
|
||||
rotation: liveRotation,
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -1941,8 +1962,15 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
|
||||
worldSnapped.y,
|
||||
worldSnapped.z,
|
||||
)
|
||||
const surfaceQuat = new Quaternion()
|
||||
surfaceMesh.getWorldQuaternion(surfaceQuat)
|
||||
const surfaceWorldY = new Euler().setFromQuaternion(surfaceQuat, 'YXZ').y
|
||||
if (cursorGroupRef.current) {
|
||||
cursorGroupRef.current.position.set(localSnapped.x, localSnapped.y, localSnapped.z)
|
||||
// The box lives in building-local space while the mesh is parented to the host
|
||||
// item, so add the host's world yaw: the box must track the item's true
|
||||
// orientation, not its host-local `rotation[1]`.
|
||||
cursorGroupRef.current.rotation.y = newRotationY + surfaceWorldY
|
||||
}
|
||||
if (mesh) mesh.position.set(x, y, z)
|
||||
}
|
||||
@@ -2352,7 +2380,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
|
||||
? getScaledDimensions(initialDraft)
|
||||
: (config.asset?.dimensions ?? DEFAULT_DIMENSIONS)
|
||||
const dims = getGridAlignedDimensions(rawDims, initialAttachTo, gridSnapStep)
|
||||
const wallSideZOffset = initialAttachTo === 'wall-side' ? -dims[2] / 2 : 0
|
||||
const wallSideZOffset = initialAttachTo === 'wall-side' ? dims[2] / 2 : 0
|
||||
const initialDimensionBounds = expandBoundsToGrid(
|
||||
getFallbackPreviewBounds(initialDraft, config.asset, initialAttachTo),
|
||||
initialAttachTo,
|
||||
|
||||
@@ -254,7 +254,15 @@ export const useKeyboard = ({
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if ((e.key === 'r' || e.key === 'R') && !isVersionPreviewMode && !isPlacingOpening()) {
|
||||
} else if (
|
||||
(e.key === 'r' || e.key === 'R') &&
|
||||
!e.metaKey &&
|
||||
!e.ctrlKey &&
|
||||
!isVersionPreviewMode &&
|
||||
!isPlacingOpening()
|
||||
) {
|
||||
// `!metaKey && !ctrlKey` lets Cmd/Ctrl+R reach the browser reload instead
|
||||
// of rotating/flipping the selected node.
|
||||
// Rotate selected node clockwise if it supports rotation (items, roofs, etc.)
|
||||
// Doors use R to flip side (front ↔ back, rotation += π); their
|
||||
// open/close toggle lives on E. Windows still use R to toggle
|
||||
|
||||
@@ -82,7 +82,7 @@ export function getItemFloorplanTransform(
|
||||
)
|
||||
const wallLocalZ =
|
||||
item.asset.attachTo === 'wall-side'
|
||||
? ((parentNode.thickness ?? 0.1) / 2) * (item.side === 'back' ? -1 : 1)
|
||||
? ((parentNode.thickness ?? 0.1) / 2) * (item.side === 'front' ? 1 : -1)
|
||||
: item.position[2]
|
||||
const [offsetX, offsetY] = rotatePlanVector(item.position[0], wallLocalZ, wallRotation)
|
||||
|
||||
@@ -164,7 +164,10 @@ type Point = {
|
||||
|
||||
function getItemDimensionPolygon(item: ItemNode, transform: FloorplanNodeTransform): Point[] {
|
||||
const [width, , depth] = getScaledDimensions(item)
|
||||
const centerLocalZ = item.asset.attachTo === 'wall-side' ? -depth / 2 : 0
|
||||
// Wall-side items extend depth-ward away from the wall (into the room); push
|
||||
// the footprint centre a half-depth out along local +Z. A negative offset
|
||||
// would lay the box across the wall onto the far side (mirrored from 3D).
|
||||
const centerLocalZ = item.asset.attachTo === 'wall-side' ? depth / 2 : 0
|
||||
const [offsetX, offsetY] = rotatePlanVector(0, centerLocalZ, transform.rotation)
|
||||
|
||||
return getRotatedRectanglePolygon(
|
||||
|
||||
Reference in New Issue
Block a user