morgan/editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(editor): node-declared per-context snapping + contextual HUD + painter scope

Browse Source 
Generify the snapping/modifier HUD off the FSM scope and node declarations
instead of wall-creation-shaped, leaking pills.

- Per-context snapping (`snappingModeByContext`, persisted): wall / item /
  polygon mode-sets with exclusive modes (grid | lines | angles | off), each
  doing exactly what its chip says. Context is node-declared via the new
  `NodeDefinition.snapProfile` ('item' | 'structural'); the resolver maps
  (profile × action) → context with no per-kind switch.
- Scope-driven HUD: helper-manager reads the interaction scope; reshaping
  (endpoint/curve/boundary) and item move get their own chip, no select-hint
  leak. Rotate R/T rounds to 45°; Alt = force-place only (hidden for
  structural kinds); Shift = cycle everywhere.
- Slab/ceiling drafting: Shift=cycle, mode-aware grid/angle, Enter finishes
  (minDraftVertices); polygon boundary vertex/edge drag begins a reshaping
  scope. Fix grid/angle being ignored on boundary edit + slab creation:
  make resolveSurfacePlanPointSnap exclusive (alignment gated on magnetic) so
  grid/angles keep the snapped fallback instead of the raw cursor.
- Painter application scope: node-derived (single/object/matching/room) from
  the hovered node, cyclable via Shift, single-source HUD chip.
- Remove the redundant GridSnapControl from view-toggles (grid step lives in
  the contextual HUD now).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Wassim SAMAD
2026-06-24 14:23:15 -04:00
co-authored by Claude Opus 4.8
parent b8b3d35f26
commit 04f1b0d59e
61 changed files with 1543 additions and 785 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/nodes/src/ceiling/boundary-editor.tsx
+13 -3
View File
@@ -2,11 +2,13 @@
import { type CeilingNode, resolveLevelId, useLiveNodeOverrides, useScene } from '@pascal-app/core'
import {
boundaryReshapeScope,
clearCeilingSnapFeedback,
PolygonEditor,
type PolygonEditorPlanPointSnapContext,
resolveCeilingPlanPointSnap,
triggerSFX,
useInteractionScope,
} from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useCallback, useEffect, useMemo, useRef } from 'react'
@@ -95,13 +97,19 @@ export const CeilingBoundaryEditor: React.FC<{ ceilingId: CeilingNode['id'] }> =
const handleDragStateChange = useCallback(
(isDragging: boolean) => {
if (!isDragging) {
// A vertex/edge drag is a `boundary` reshape — drive the snapping HUD
// (no-angle 'polygon' set) and keep the idle select hints off-screen.
const scope = useInteractionScope.getState()
if (isDragging) {
scope.begin(boundaryReshapeScope(ceilingId))
} else {
scope.endIf((s) => s.kind === 'reshaping' && s.reshape === 'boundary')
ownsPolygonPreviewRef.current = false
clearCeilingSnapFeedback()
}
setCeilingHandleHover(isDragging)
},
[setCeilingHandleHover],
[ceilingId, setCeilingHandleHover],
)
const handlePolygonEditorDragCommit = useCallback(() => {
@@ -126,7 +134,6 @@ export const CeilingBoundaryEditor: React.FC<{ ceilingId: CeilingNode['id'] }> =
levelId: ceilingLevelId,
excludeId: ceilingId,
altKey: context.nativeEvent?.altKey === true,
shiftKey: context.nativeEvent?.shiftKey === true,
}).point,
[ceilingId, ceilingLevelId],
)
@@ -136,6 +143,9 @@ export const CeilingBoundaryEditor: React.FC<{ ceilingId: CeilingNode['id'] }> =
clearCeilingSnapFeedback()
useLiveNodeOverrides.getState().clear(ceilingId)
useScene.getState().markDirty(ceilingId)
useInteractionScope
.getState()
.endIf((s) => s.kind === 'reshaping' && s.reshape === 'boundary')
ownsPolygonPreviewRef.current = false
if (ownsCeilingHoverRef.current && useViewer.getState().hoveredId === ceilingId) {
useViewer.getState().setHoveredId(null)
packages/nodes/src/ceiling/definition.ts
+2 -2
View File
@@ -79,6 +79,7 @@ function ceilingHandles(_node: CeilingNodeType): HandleDescriptor<CeilingNodeTyp
*/
export const ceilingDefinition: NodeDefinition<typeof CeilingNode> = {
kind: 'ceiling',
snapProfile: 'structural',
schemaVersion: 1,
schema: CeilingNode,
category: 'structure',
@@ -155,8 +156,7 @@ export const ceilingDefinition: NodeDefinition<typeof CeilingNode> = {
toolHints: [
{ key: 'Left click', label: 'Trace ceiling outline' },
{ key: 'Enter', label: 'Finish ceiling' },
{ key: 'Shift', label: 'Free outline' },
{ key: 'Enter', label: 'Finish ceiling', minDraftVertices: 3 },
{ key: 'Esc', label: 'Cancel' },
],
packages/nodes/src/ceiling/move-tool.tsx
+6 -7
View File
@@ -16,6 +16,7 @@ import {
import {
CursorSphere,
consumePlacementDragRelease,
isMagneticSnapActive,
markToolCancelConsumed,
triggerSFX,
useAlignmentGuides,
@@ -37,7 +38,7 @@ import { BufferGeometry, DoubleSide, Path, Shape, ShapeGeometry, Vector3 } from
* mesh's X/Z position on rebuild (`mesh.position.x = 0`,
* `mesh.position.z = 0`) so the visual transitions smoothly.
*
* Snaps to the editor's configured grid step (Shift bypasses).
* Snaps to the editor's configured grid step.
*/
function snap(value: number) {
return snapScalar(value, useEditor.getState().gridSnapStep)
@@ -149,12 +150,10 @@ export const MoveCeilingTool: React.FC<{ node: CeilingNode }> = ({ node }) => {
const onGridMove = (event: GridEvent) => {
if (isFloorplanSourcedEvent(event)) return
const bypassSnap = event.nativeEvent?.shiftKey === true
const localX = bypassSnap ? event.localPosition[0] : snap(event.localPosition[0])
const localZ = bypassSnap ? event.localPosition[2] : snap(event.localPosition[2])
const localX = snap(event.localPosition[0])
const localZ = snap(event.localPosition[2])
if (
!bypassSnap &&
previousGridPosRef.current &&
(localX !== previousGridPosRef.current[0] || localZ !== previousGridPosRef.current[1])
) {
@@ -170,8 +169,8 @@ export const MoveCeilingTool: React.FC<{ node: CeilingNode }> = ({ node }) => {
// Figma-style alignment snap: align the ceiling's translated polygon
// vertices to other objects' anchors; fold the snap into the delta and
// publish a guide. Alt bypasses alignment; Shift bypasses all snap.
const bypass = event.nativeEvent?.altKey === true || bypassSnap
// publish a guide. Alignment follows the global magnetic snap mode.
const bypass = !isMagneticSnapActive()
if (!bypass && alignmentCandidates.length > 0) {
const result = resolveAlignment({
moving: polygonAnchors(ceilingId, translatePolygon(originalPolygon, deltaX, deltaZ)),
packages/nodes/src/ceiling/tool.tsx
+17 -37
View File
@@ -13,6 +13,9 @@ import {
CursorSphere,
clearCeilingSnapFeedback,
EDITOR_LAYER,
isAngleSnapActive,
isGridSnapActive,
isMagneticSnapActive,
markToolCancelConsumed,
resolveCeilingPlanPointSnap,
triggerSFX,
@@ -30,7 +33,6 @@ import { CeilingNode } from './schema'
* Multi-click polygon drawing at the ceiling height (2.52m default)
* with a vertical TSL-gradient connector + ground-shadow lines so the
* draft is visible against both the ceiling plane and the floor.
* Shift defeats the 15° angle snap during drag.
*/
const CEILING_HEIGHT = 2.52
@@ -65,7 +67,6 @@ export const CeilingTool: React.FC = () => {
const [snappedCursorPosition, setSnappedCursorPosition] = useState<[number, number]>([0, 0])
const [levelY, setLevelY] = useState(0)
const previousSnappedPointRef = useRef<[number, number] | null>(null)
const shiftPressed = useRef(false)
// Clear preset-seeded defaults on deactivation so a later manual ceiling
// draw isn't built with a stale preset's parameters. Unmount-only.
@@ -73,6 +74,12 @@ export const CeilingTool: React.FC = () => {
useEffect(() => () => clearCeilingSnapFeedback(), [])
// Publish the live vertex count so the HUD shows "Finish" only at ≥ 3 points.
useEffect(() => {
useEditor.getState().setDraftVertexCount(points.length)
}, [points.length])
useEffect(() => () => useEditor.getState().setDraftVertexCount(0), [])
const verticalGeo = useMemo(
() =>
new BufferGeometry().setFromPoints([
@@ -93,38 +100,27 @@ export const CeilingTool: React.FC = () => {
const onGridMove = (event: GridEvent) => {
if (!(cursorRef.current && gridCursorRef.current)) return
const rawPoint: [number, number] = [event.localPosition[0], event.localPosition[2]]
const bypassSnap = shiftPressed.current || event.nativeEvent?.shiftKey === true
const gridPosition: [number, number] = bypassSnap
? rawPoint
: [...snapPointToGrid(rawPoint, useEditor.getState().gridSnapStep)]
// Honour the active snapping mode: grid lattice + 15° angle lock are each
// gated on the mode (off / lines → free), like the slab tool.
const gridStep = isGridSnapActive() ? useEditor.getState().gridSnapStep : 0
const gridPosition: [number, number] = [...snapPointToGrid(rawPoint, gridStep)]
setCursorPosition(gridPosition)
setLevelY(event.localPosition[1])
const ceilingY = event.localPosition[1] + CEILING_HEIGHT
const gridY = event.localPosition[1] + GRID_OFFSET
const lastPoint = points[points.length - 1]
// 15° angle snap from the raw cursor (matching the 2D floorplan
// pipeline) with the distance snapped along the ray to the grid step.
const orthoPoint: [number, number] =
bypassSnap || !lastPoint
? gridPosition
: [
...snapPointAlongAngleRay(
lastPoint,
rawPoint,
DEFAULT_ANGLE_STEP,
useEditor.getState().gridSnapStep,
),
]
isAngleSnapActive() && lastPoint
? [...snapPointAlongAngleRay(lastPoint, rawPoint, DEFAULT_ANGLE_STEP, gridStep)]
: gridPosition
const displayPoint = resolveCeilingPlanPointSnap({
rawPoint,
fallbackPoint: orthoPoint,
levelId: currentLevelId,
altKey: event.nativeEvent?.altKey === true,
shiftKey: bypassSnap,
altKey: !isMagneticSnapActive(),
}).point
setSnappedCursorPosition(displayPoint)
if (
!bypassSnap &&
points.length > 0 &&
previousSnappedPointRef.current &&
(displayPoint[0] !== previousSnappedPointRef.current[0] ||
@@ -178,28 +174,12 @@ export const CeilingTool: React.FC = () => {
clearCeilingSnapFeedback()
}
const onKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Shift') shiftPressed.current = true
}
const onKeyUp = (e: KeyboardEvent) => {
if (e.key === 'Shift') shiftPressed.current = false
}
const onWindowBlur = () => {
shiftPressed.current = false
}
document.addEventListener('keydown', onKeyDown)
document.addEventListener('keyup', onKeyUp)
window.addEventListener('blur', onWindowBlur)
emitter.on('grid:move', onGridMove)
emitter.on('grid:click', onGridClick)
emitter.on('grid:double-click', onGridDoubleClick)
emitter.on('tool:cancel', onCancel)
return () => {
document.removeEventListener('keydown', onKeyDown)
document.removeEventListener('keyup', onKeyUp)
window.removeEventListener('blur', onWindowBlur)
emitter.off('grid:move', onGridMove)
emitter.off('grid:click', onGridClick)
emitter.off('grid:double-click', onGridDoubleClick)
packages/nodes/src/column/definition.ts
-1
View File
@@ -363,7 +363,6 @@ export const columnDefinition: NodeDefinition<typeof ColumnNode> = {
tool: () => import('./tool'),
toolHints: [
{ key: 'Left click', label: 'Place column' },
{ key: 'Shift', label: 'Free place' },
{ key: 'Esc', label: 'Cancel' },
],
floorplan: buildColumnFloorplan,
packages/nodes/src/door/definition.ts
-1
View File
@@ -251,7 +251,6 @@ export const doorDefinition: NodeDefinition<typeof DoorNode> = {
toolHints: [
{ key: 'Left click', label: 'Place door on wall' },
{ key: 'Shift', label: 'Free place' },
{ key: 'Esc', label: 'Cancel' },
],
packages/nodes/src/duct-segment/definition.ts
-1
View File
@@ -165,7 +165,6 @@ export const ductSegmentDefinition: NodeDefinition<typeof DuctSegmentNode> = {
toolHints: [
{ key: 'Click', label: 'Start segment' },
{ key: 'Click again', label: 'Place it (locked to 45°)' },
{ key: 'Shift', label: 'Free angle' },
{ key: 'Alt + drag', label: 'Go vertical ↕, click to place' },
{ key: '[ / ]', label: 'Duct diameter down / up' },
{ key: 'Q', label: 'Round / rect trunk' },
packages/nodes/src/duct-terminal/definition.ts
-1
View File
@@ -81,7 +81,6 @@ export const ductTerminalDefinition: NodeDefinition<typeof DuctTerminalNode> = {
{ key: 'Click', label: 'Place register' },
{ key: 'M', label: 'Mount: floor / ceiling / wall' },
{ key: 'R / T', label: 'Rotate ±45° (floor / ceiling)' },
{ key: 'Shift', label: 'Smooth (no grid snap)' },
{ key: 'Esc', label: 'Exit' },
],
packages/nodes/src/fence/actions/move-endpoint.ts
+9 -5
View File
@@ -11,6 +11,7 @@ import {
} from '@pascal-app/core'
import {
type FencePlanPoint,
isAngleSnapActive,
isMagneticSnapActive,
isSegmentLongEnough,
snapFenceDraftPoint,
@@ -164,15 +165,18 @@ export const moveFenceEndpointDragAction: DragAction<MoveFenceEndpointCtx, MoveF
preview: (ctx, point, modifiers) => {
const planPoint: FencePlanPoint = [point[0], point[1]]
// Endpoint move = grid snap only; the 45°-from-start angle snap
// is draft-only. Shift is a hard snap bypass.
// Endpoint move honours the active snapping mode (HUD chip): grid → lattice;
// lines → magnetic corner/alignment; angles → lock to 15° rays from the
// fixed corner; off → raw. No Shift bypass — Shift cycles the mode; Off is
// the bypass.
const snapped = snapFenceDraftPoint({
point: planPoint,
walls: ctx.levelWalls,
fences: ctx.levelFences,
ignoreFenceIds: [ctx.fenceId as string],
bypassSnap: modifiers.shift,
magnetic: !modifiers.shift && isMagneticSnapActive(),
start: ctx.fixedPoint,
angleSnap: isAngleSnapActive(),
magnetic: isMagneticSnapActive(),
})
// Figma-style alignment: nudge the dragged endpoint onto another wall /
@@ -180,7 +184,7 @@ export const moveFenceEndpointDragAction: DragAction<MoveFenceEndpointCtx, MoveF
// guide. The resolver connects to the NEAREST real anchor, so the dot
// always sits on an actual point. Alt is reserved for detach.
let aligned = snapped
if (!modifiers.shift && ctx.alignCandidates.length > 0) {
if (isMagneticSnapActive() && ctx.alignCandidates.length > 0) {
const ar = resolveAlignment({
moving: [{ nodeId: ctx.fenceId as string, kind: 'corner', x: snapped[0], z: snapped[1] }],
candidates: ctx.alignCandidates,
packages/nodes/src/fence/curve-tool.tsx
+5 -30
View File
@@ -29,8 +29,8 @@ import { useCallback, useEffect, useRef, useState } from 'react'
* Phase 5 Stage D — fence curve tool (kind-owned).
*
* 1:1 port of the legacy `CurveFenceTool` (editor/components/tools/
* fence/curve-fence-tool.tsx). Same snap pipeline, same Shift override,
* same history dance, same activation grace. Imports adjusted to the
* fence/curve-fence-tool.tsx). Same snap pipeline, same history dance,
* same activation grace. Imports adjusted to the
* `@pascal-app/editor` public surface (triggerSFX, markToolCancelConsumed,
* getSegmentGridStep, snapScalarToGrid). Mounted via
* `def.affordanceTools.curve` — ToolManager picks it up at runtime,
@@ -40,7 +40,6 @@ export const CurveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
const activatedAtRef = useRef<number>(Date.now())
const originalCurveOffsetRef = useRef(getClampedWallCurveOffset(node))
const previousCurveOffsetRef = useRef<number | null>(null)
const shiftPressedRef = useRef(false)
const previewOffsetRef = useRef<number>(originalCurveOffsetRef.current)
const initialHandle = getWallMidpointHandlePoint(node)
@@ -91,29 +90,21 @@ export const CurveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
}
const onGridMove = (event: GridEvent) => {
const bypassSnap = shiftPressedRef.current || event.nativeEvent?.shiftKey === true
const snapStep = getSegmentGridStep()
const localX = bypassSnap
? event.localPosition[0]
: snapScalarToGrid(event.localPosition[0], snapStep)
const localZ = bypassSnap
? event.localPosition[2]
: snapScalarToGrid(event.localPosition[2], snapStep)
const localX = snapScalarToGrid(event.localPosition[0], snapStep)
const localZ = snapScalarToGrid(event.localPosition[2], snapStep)
const offsetFromMidpoint = -(
(localX - chord.midpoint.x) * chord.normal.x +
(localZ - chord.midpoint.y) * chord.normal.y
)
const snappedOffset = bypassSnap
? offsetFromMidpoint
: snapScalarToGrid(offsetFromMidpoint, snapStep)
const snappedOffset = snapScalarToGrid(offsetFromMidpoint, snapStep)
const nextCurveOffset = normalizeWallCurveOffset(
node,
Math.max(-maxCurveOffset, Math.min(maxCurveOffset, snappedOffset)),
)
if (
!bypassSnap &&
previousCurveOffsetRef.current !== null &&
nextCurveOffset !== previousCurveOffsetRef.current
) {
@@ -159,23 +150,9 @@ export const CurveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
exitCurveMode()
}
const onKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Shift') {
shiftPressedRef.current = true
}
}
const onKeyUp = (event: KeyboardEvent) => {
if (event.key === 'Shift') {
shiftPressedRef.current = false
}
}
emitter.on('grid:move', onGridMove)
emitter.on('grid:click', onGridClick)
emitter.on('tool:cancel', onCancel)
window.addEventListener('keydown', onKeyDown)
window.addEventListener('keyup', onKeyUp)
return () => {
if (!wasCommitted) {
@@ -185,8 +162,6 @@ export const CurveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
emitter.off('grid:move', onGridMove)
emitter.off('grid:click', onGridClick)
emitter.off('tool:cancel', onCancel)
window.removeEventListener('keydown', onKeyDown)
window.removeEventListener('keyup', onKeyUp)
}
}, [exitCurveMode, node])
packages/nodes/src/fence/definition.ts
+1
View File
@@ -134,6 +134,7 @@ const fenceHandles: HandleDescriptor<FenceNodeType>[] = [
*/
export const fenceDefinition: NodeDefinition<typeof FenceNode> = {
kind: 'fence',
snapProfile: 'structural',
schemaVersion: 1,
schema: FenceNode,
category: 'structure',
packages/nodes/src/hvac-equipment/definition.ts
-1
View File
@@ -86,7 +86,6 @@ export const hvacEquipmentDefinition: NodeDefinition<typeof HvacEquipmentNode> =
toolHints: [
{ key: 'Click', label: 'Place unit' },
{ key: 'R / T', label: 'Rotate ±45°' },
{ key: 'Shift', label: 'Smooth (no grid snap)' },
{ key: 'Esc', label: 'Exit' },
],
packages/nodes/src/item/definition.ts
+2 -1
View File
@@ -166,6 +166,7 @@ function itemWallMoveHandle(): HandleDescriptor<ItemNodeType> {
*/
export const itemDefinition: NodeDefinition<typeof ItemNode> = {
kind: 'item',
snapProfile: 'item',
schemaVersion: 1,
schema: ItemNode,
category: 'furnish',
@@ -316,7 +317,7 @@ export const itemDefinition: NodeDefinition<typeof ItemNode> = {
{ key: 'R', label: 'Rotate counterclockwise' },
{ key: 'T', label: 'Rotate clockwise' },
{ key: 'Shift', label: 'Cycle snapping mode' },
{ key: 'Alt', label: 'Free place (no snap)' },
{ key: 'Alt', label: 'Force place' },
{ key: 'Esc', label: 'Cancel' },
],
packages/nodes/src/lineset/definition.ts
-1
View File
@@ -111,7 +111,6 @@ export const linesetDefinition: NodeDefinition<typeof LinesetNode> = {
toolHints: [
{ key: 'Click', label: 'Start lineset' },
{ key: 'Click again', label: 'Place it (locked to 45°)' },
{ key: 'Shift', label: 'Free angle' },
{ key: 'Alt + drag', label: 'Go vertical ↕, click to place' },
{ key: 'Esc', label: 'Cancel start point' },
],
packages/nodes/src/liquid-line/definition.ts
-1
View File
@@ -102,7 +102,6 @@ export const liquidLineDefinition: NodeDefinition<typeof LiquidLineNode> = {
toolHints: [
{ key: 'Click', label: 'Start liquid line' },
{ key: 'Click again', label: 'Place it (locked to 45°)' },
{ key: 'Shift', label: 'Free angle' },
{ key: 'Alt + drag', label: 'Go vertical ↕, click to place' },
{ key: 'F', label: 'Follow: trace a lineset' },
{ key: 'Esc', label: 'Cancel' },
packages/nodes/src/pipe-segment/definition.ts
-1
View File
@@ -110,7 +110,6 @@ export const pipeSegmentDefinition: NodeDefinition<typeof PipeSegmentNode> = {
{ key: 'Q', label: 'Waste / vent' },
{ key: '[ / ]', label: 'Pipe size down / up' },
{ key: 'Alt + drag', label: 'Vertical stack ↕, click to place' },
{ key: 'Shift', label: 'Free angle' },
{ key: 'Esc', label: 'Cancel start point' },
],
packages/nodes/src/pipe-trap/definition.ts
-1
View File
@@ -52,7 +52,6 @@ export const pipeTrapDefinition: NodeDefinition<typeof PipeTrapNode> = {
toolHints: [
{ key: 'Click', label: 'Place trap' },
{ key: 'R / T', label: 'Rotate ±45°' },
{ key: 'Shift', label: 'Smooth (no grid snap)' },
{ key: 'Esc', label: 'Exit' },
],
packages/nodes/src/roof/definition.ts
+1
View File
@@ -93,6 +93,7 @@ const roofHandles: HandleDescriptor<RoofNodeType>[] = [roofMoveHandle()]
*/
export const roofDefinition: NodeDefinition<typeof RoofNode> = {
kind: 'roof',
snapProfile: 'structural',
schemaVersion: 1,
schema: RoofNode,
category: 'structure',
packages/nodes/src/shared/slot-paint.ts
+3
View File
@@ -243,10 +243,13 @@ export type SlotPaintConfig = {
node: AnyNode,
role: string,
) => { material: MaterialSchema | undefined; materialPreset: string | undefined } | null
/** Opt into the painter's `room` application scope (walls, slabs). */
roomScope?: boolean
}
export function createSlotPaintCapability(config: SlotPaintConfig): PaintCapability {
return {
roomScope: config.roomScope,
resolveRole: config.resolveRole,
buildPatch: ({ node, role, materialPreset }) => {
const slots = { ...((node as SlotsNode).slots ?? {}) }
packages/nodes/src/shelf/definition.ts
-1
View File
@@ -263,7 +263,6 @@ export const shelfDefinition: NodeDefinition<typeof ShelfNode> = {
tool: () => import('./tool'),
toolHints: [
{ key: 'Left click', label: 'Place shelf' },
{ key: 'Shift', label: 'Free place' },
{ key: 'Esc', label: 'Cancel' },
],
packages/nodes/src/slab/boundary-editor.tsx
+17 -1
View File
@@ -2,10 +2,12 @@
import { resolveLevelId, type SlabNode, useLiveNodeOverrides, useScene } from '@pascal-app/core'
import {
boundaryReshapeScope,
clearSlabSnapFeedback,
PolygonEditor,
type PolygonEditorPlanPointSnapContext,
resolveSlabPlanPointSnap,
useInteractionScope,
} from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useCallback, useEffect } from 'react'
@@ -65,6 +67,17 @@ export const SlabBoundaryEditor: React.FC<{ slabId: SlabNode['id'] }> = ({ slabI
clearSlabSnapFeedback()
}, [])
// A vertex/edge drag is a `boundary` reshape — drive the snapping HUD (the
// no-angle 'polygon' set) and keep the idle select hints off-screen.
const handleDragStateChange = useCallback(
(isDragging: boolean) => {
const scope = useInteractionScope.getState()
if (isDragging) scope.begin(boundaryReshapeScope(slabId))
else scope.endIf((s) => s.kind === 'reshaping' && s.reshape === 'boundary')
},
[slabId],
)
const resolvePolygonEditorPlanPoint = useCallback(
(context: PolygonEditorPlanPointSnapContext) =>
resolveSlabPlanPointSnap({
@@ -73,7 +86,6 @@ export const SlabBoundaryEditor: React.FC<{ slabId: SlabNode['id'] }> = ({ slabI
levelId: slabLevelId,
excludeId: slabId,
altKey: context.nativeEvent?.altKey === true,
shiftKey: context.nativeEvent?.shiftKey === true,
}).point,
[slabId, slabLevelId],
)
@@ -86,6 +98,9 @@ export const SlabBoundaryEditor: React.FC<{ slabId: SlabNode['id'] }> = ({ slabI
clearSlabSnapFeedback()
useLiveNodeOverrides.getState().clear(slabId)
useScene.getState().markDirty(slabId)
useInteractionScope
.getState()
.endIf((s) => s.kind === 'reshaping' && s.reshape === 'boundary')
}
}, [slabId])
@@ -98,6 +113,7 @@ export const SlabBoundaryEditor: React.FC<{ slabId: SlabNode['id'] }> = ({ slabI
levelId={slabLevelId ?? undefined}
minVertices={3}
onDragCommit={handleDragCommit}
onDragStateChange={handleDragStateChange}
onPolygonChange={handlePolygonChange}
onPolygonPreview={handlePolygonPreview}
polygon={slab.polygon}
packages/nodes/src/slab/definition.ts
+2 -2
View File
@@ -133,6 +133,7 @@ function slabHandles(_node: SlabNodeType): HandleDescriptor<SlabNodeType>[] {
*/
export const slabDefinition: NodeDefinition<typeof SlabNode> = {
kind: 'slab',
snapProfile: 'structural',
schemaVersion: 1,
schema: SlabNode,
category: 'structure',
@@ -206,8 +207,7 @@ export const slabDefinition: NodeDefinition<typeof SlabNode> = {
toolHints: [
{ key: 'Left click', label: 'Trace slab outline' },
{ key: 'Enter', label: 'Finish slab' },
{ key: 'Shift', label: 'Free outline' },
{ key: 'Enter', label: 'Finish slab', minDraftVertices: 3 },
{ key: 'Esc', label: 'Cancel' },
],
packages/nodes/src/slab/move-tool.tsx
+3 -6
View File
@@ -169,18 +169,15 @@ export const MoveSlabTool: React.FC<{ node: SlabNode }> = ({ node }) => {
const onGridMove = (event: GridEvent) => {
if (isFloorplanSourcedEvent(event)) return
const gridStep = getSegmentGridStep()
const bypassSnap = event.nativeEvent?.shiftKey === true
const [localX, localZ] = snapFenceDraftPoint({
point: [event.localPosition[0], event.localPosition[2]],
walls: levelWalls,
fences: levelFences,
bypassSnap,
magnetic: !bypassSnap && isMagneticSnapActive(),
magnetic: isMagneticSnapActive(),
gridSnap: (p) => snapBuildingLocalToWorldGrid(p, gridStep),
})
if (
!bypassSnap &&
previousGridPosRef.current &&
(localX !== previousGridPosRef.current[0] || localZ !== previousGridPosRef.current[1])
) {
@@ -196,8 +193,8 @@ export const MoveSlabTool: React.FC<{ node: SlabNode }> = ({ node }) => {
// Figma-style alignment snap: align the slab's translated polygon
// vertices to other objects' anchors; fold the snap into the delta and
// publish a guide. Alt bypasses alignment; Shift bypasses all snap.
const bypass = event.nativeEvent?.altKey === true || bypassSnap
// publish a guide. Alignment follows the global magnetic snap mode.
const bypass = !isMagneticSnapActive()
if (!bypass && alignmentCandidates.length > 0) {
const result = resolveAlignmentForActiveBuilding({
moving: polygonAnchors(slabId, translatePolygon(originalPolygon, deltaX, deltaZ)),
packages/nodes/src/slab/paint.ts
+1
View File
@@ -8,6 +8,7 @@ import { createSlotPaintCapability, previewGeometrySlot } from '../shared/slot-p
* `node.slots[slotId]` (a shared scene-material or `library:` ref) like the shelf.
*/
export const slabPaint = createSlotPaintCapability({
roomScope: true,
resolveRole: ({ hitObject }) => {
const slotId = (hitObject?.userData as { slotId?: string } | undefined)?.slotId
return slotId === 'side' ? 'side' : 'surface'
packages/nodes/src/slab/tool.tsx
+32 -37
View File
@@ -13,6 +13,8 @@ import {
CursorSphere,
clearSlabSnapFeedback,
EDITOR_LAYER,
isAngleSnapActive,
isGridSnapActive,
markToolCancelConsumed,
resolveSlabPlanPointSnap,
triggerSFX,
@@ -62,7 +64,6 @@ export const SlabTool: React.FC = () => {
const [snappedCursorPosition, setSnappedCursorPosition] = useState<[number, number]>([0, 0])
const [levelY, setLevelY] = useState(0)
const previousSnappedPointRef = useRef<[number, number] | null>(null)
const shiftPressed = useRef(false)
// Clear preset-seeded defaults on deactivation so a later manual slab draw
// isn't built with a stale preset's parameters. Unmount-only.
@@ -70,42 +71,39 @@ export const SlabTool: React.FC = () => {
useEffect(() => () => clearSlabSnapFeedback(), [])
// Publish the live vertex count so the HUD shows "Finish" only at ≥ 3 points.
useEffect(() => {
useEditor.getState().setDraftVertexCount(points.length)
}, [points.length])
useEffect(() => () => useEditor.getState().setDraftVertexCount(0), [])
useEffect(() => {
if (!currentLevelId) return
const onGridMove = (event: GridEvent) => {
if (!cursorRef.current) return
const rawPoint: [number, number] = [event.localPosition[0], event.localPosition[2]]
const bypassSnap = shiftPressed.current || event.nativeEvent?.shiftKey === true
const gridPosition: [number, number] = bypassSnap
? rawPoint
: [...snapPointToGrid(rawPoint, useEditor.getState().gridSnapStep)]
// Slab drafting is the 'polygon' snap context (grid / lines / off — no
// angle, no Shift bypass; Shift cycles the mode, Off is the bypass).
const gridStep = isGridSnapActive() ? useEditor.getState().gridSnapStep : 0
const gridPosition: [number, number] = [...snapPointToGrid(rawPoint, gridStep)]
setCursorPosition(gridPosition)
setLevelY(event.localPosition[1])
const lastPoint = points[points.length - 1]
// 15° angle snap from the raw cursor (matching the 2D floorplan
// pipeline) with the distance snapped along the ray to the grid step.
// Angle lock only when the mode asks for it (polygon never does today, but
// honour the flag so the behaviour follows the HUD).
const orthoPoint: [number, number] =
bypassSnap || !lastPoint
? gridPosition
: [
...snapPointAlongAngleRay(
lastPoint,
rawPoint,
DEFAULT_ANGLE_STEP,
useEditor.getState().gridSnapStep,
),
]
isAngleSnapActive() && lastPoint
? [...snapPointAlongAngleRay(lastPoint, rawPoint, DEFAULT_ANGLE_STEP, gridStep)]
: gridPosition
const displayPoint = resolveSlabPlanPointSnap({
rawPoint,
fallbackPoint: orthoPoint,
levelId: currentLevelId,
altKey: event.nativeEvent?.altKey === true,
shiftKey: bypassSnap,
}).point
setSnappedCursorPosition(displayPoint)
if (
!bypassSnap &&
points.length > 0 &&
previousSnappedPointRef.current &&
(displayPoint[0] !== previousSnappedPointRef.current[0] ||
@@ -139,14 +137,18 @@ export const SlabTool: React.FC = () => {
}
}
// Finish the polygon (Enter or double-click): commit once there are enough
// vertices. Closing near the first vertex (in onGridClick) is the third way.
const finishDrawing = () => {
if (points.length < 3) return
const slabId = commitSlabDrawing(currentLevelId, points)
setSelection({ selectedIds: [slabId] })
setPoints([])
clearSlabSnapFeedback()
}
const onGridDoubleClick = (_event: GridEvent) => {
if (!currentLevelId) return
if (points.length >= 3) {
const slabId = commitSlabDrawing(currentLevelId, points)
setSelection({ selectedIds: [slabId] })
setPoints([])
clearSlabSnapFeedback()
}
finishDrawing()
}
const onCancel = () => {
@@ -156,17 +158,12 @@ export const SlabTool: React.FC = () => {
}
const onKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Shift') shiftPressed.current = true
}
const onKeyUp = (e: KeyboardEvent) => {
if (e.key === 'Shift') shiftPressed.current = false
}
const onWindowBlur = () => {
shiftPressed.current = false
if (e.key === 'Enter') {
e.preventDefault()
finishDrawing()
}
}
document.addEventListener('keydown', onKeyDown)
document.addEventListener('keyup', onKeyUp)
window.addEventListener('blur', onWindowBlur)
emitter.on('grid:move', onGridMove)
emitter.on('grid:click', onGridClick)
@@ -175,8 +172,6 @@ export const SlabTool: React.FC = () => {
return () => {
document.removeEventListener('keydown', onKeyDown)
document.removeEventListener('keyup', onKeyUp)
window.removeEventListener('blur', onWindowBlur)
emitter.off('grid:move', onGridMove)
emitter.off('grid:click', onGridClick)
emitter.off('grid:double-click', onGridDoubleClick)
packages/nodes/src/spawn/definition.ts
-1
View File
@@ -100,7 +100,6 @@ export const spawnDefinition: NodeDefinition<typeof SpawnNode> = {
tool: () => import('./tool'),
toolHints: [
{ key: 'Left click', label: 'Place spawn point' },
{ key: 'Shift', label: 'Free place' },
{ key: 'Esc', label: 'Cancel' },
],
packages/nodes/src/wall/curve-tool.tsx
+7 -27
View File
@@ -27,8 +27,8 @@ import { useCallback, useEffect, useRef, useState } from 'react'
/**
* Phase 5 Stage D — wall curve tool (kind-owned).
*
* 1:1 port of the legacy `CurveWallTool`. Same snap pipeline, Shift
* override, history dance, activation grace. The wall variant uses
* 1:1 port of the legacy `CurveWallTool`. Same snap pipeline,
* history dance, activation grace. The wall variant uses
* `useScene.temporal.getState().pause()` / `.resume()` directly rather
* than the depth-counted `pauseSceneHistory` helpers — matches legacy.
*/
@@ -36,7 +36,6 @@ export const CurveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
const activatedAtRef = useRef<number>(Date.now())
const originalCurveOffsetRef = useRef(getClampedWallCurveOffset(node))
const previousCurveOffsetRef = useRef<number | null>(null)
const shiftPressedRef = useRef(false)
const previewOffsetRef = useRef<number>(originalCurveOffsetRef.current)
const initialHandle = getWallMidpointHandlePoint(node)
@@ -87,14 +86,14 @@ export const CurveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
}
const onGridMove = (event: GridEvent) => {
const bypassSnap = shiftPressedRef.current || event.nativeEvent?.shiftKey === true
const snapStep = getSegmentGridStep()
// Snap the cursor on the WORLD XZ grid (still in building-local
// coords for the rest of the math) so a rotated building doesn't
// pull the curve handle off the visible grid lines.
const [snappedLocalX, snappedLocalZ] = bypassSnap
? [event.localPosition[0], event.localPosition[2]]
: snapBuildingLocalToWorldGrid([event.localPosition[0], event.localPosition[2]], snapStep)
const [snappedLocalX, snappedLocalZ] = snapBuildingLocalToWorldGrid(
[event.localPosition[0], event.localPosition[2]],
snapStep,
)
const localX = snappedLocalX
const localZ = snappedLocalZ
@@ -102,16 +101,13 @@ export const CurveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
(localX - chord.midpoint.x) * chord.normal.x +
(localZ - chord.midpoint.y) * chord.normal.y
)
const snappedOffset = bypassSnap
? offsetFromMidpoint
: snapScalarToGrid(offsetFromMidpoint, snapStep)
const snappedOffset = snapScalarToGrid(offsetFromMidpoint, snapStep)
const nextCurveOffset = normalizeWallCurveOffset(
node,
Math.max(-maxCurveOffset, Math.min(maxCurveOffset, snappedOffset)),
)
if (
!bypassSnap &&
previousCurveOffsetRef.current !== null &&
nextCurveOffset !== previousCurveOffsetRef.current
) {
@@ -157,23 +153,9 @@ export const CurveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
exitCurveMode()
}
const onKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Shift') {
shiftPressedRef.current = true
}
}
const onKeyUp = (event: KeyboardEvent) => {
if (event.key === 'Shift') {
shiftPressedRef.current = false
}
}
emitter.on('grid:move', onGridMove)
emitter.on('grid:click', onGridClick)
emitter.on('tool:cancel', onCancel)
window.addEventListener('keydown', onKeyDown)
window.addEventListener('keyup', onKeyUp)
return () => {
if (!wasCommitted) {
@@ -183,8 +165,6 @@ export const CurveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
emitter.off('grid:move', onGridMove)
emitter.off('grid:click', onGridClick)
emitter.off('tool:cancel', onCancel)
window.removeEventListener('keydown', onKeyDown)
window.removeEventListener('keyup', onKeyUp)
}
}, [exitCurveMode, node])
packages/nodes/src/wall/definition.ts
+1
View File
@@ -25,6 +25,7 @@ import { wallSlots } from './slots'
*/
export const wallDefinition: NodeDefinition<typeof WallNode> = {
kind: 'wall',
snapProfile: 'structural',
schemaVersion: 1,
schema: WallNode,
category: 'structure',
packages/nodes/src/wall/floorplan-affordances.ts
+7 -14
View File
@@ -43,8 +43,8 @@ import {
* the final state to scene in one tracked update and clears the
* overrides. `canCommit` still guards against collapsed walls.
*
* Alt-detach (drop linked walls) and SHIFT-free-place (skip angle snap)
* are wired via the standard modifier flags on the session.
* Alt-detach (drop linked walls) is wired via the standard modifier
* flags on the session.
*/
type WallEndpointPayload = { wallId: AnyNodeId; endpoint: 'start' | 'end' }
@@ -95,7 +95,7 @@ function collectLinkedWalls(
* Wall curve sagitta drag — 1:1 port of the legacy
* `handleWallCurvePointerDown` + commit flow. Drag projects the pointer
* onto the chord normal to compute a `curveOffset`, snapped to the
* grid step (Shift bypasses snap), clamped to `getMaxWallCurveOffset`,
* grid step, clamped to `getMaxWallCurveOffset`,
* normalized via `normalizeWallCurveOffset`. Same single-undo dance as
* the move-endpoint affordance — the dispatcher handles snapshot /
* pause / resume around `apply`.
@@ -111,13 +111,11 @@ export const wallCurveAffordance: FloorplanAffordance<WallNode> = {
return {
affectedIds: [node.id],
apply({ planPoint, modifiers }) {
apply({ planPoint }) {
const snapStep = getSegmentGridStep()
// World-grid snap so a rotated building doesn't drag the curve
// handle off the visible grid.
const [x, y] = modifiers.shiftKey
? [planPoint[0], planPoint[1]]
: snapBuildingLocalToWorldGrid([planPoint[0], planPoint[1]], snapStep)
const [x, y] = snapBuildingLocalToWorldGrid([planPoint[0], planPoint[1]], snapStep)
// Signed projection of (snappedPoint - chord midpoint) onto the
// chord normal. Legacy negates because the SVG y-axis flips
@@ -129,9 +127,7 @@ export const wallCurveAffordance: FloorplanAffordance<WallNode> = {
(x - chord.midpoint.x) * chord.normal.x +
(y - chord.midpoint.y) * chord.normal.y
)
const snappedOffset = modifiers.shiftKey
? offsetFromMidpoint
: snapScalarToGrid(offsetFromMidpoint, snapStep)
const snappedOffset = snapScalarToGrid(offsetFromMidpoint, snapStep)
const nextCurveOffset = normalizeWallCurveOffset(
node,
Math.max(-maxOffset, Math.min(maxOffset, snappedOffset)),
@@ -188,13 +184,11 @@ export const wallMoveEndpointAffordance: FloorplanAffordance<WallNode> = {
const sceneNodes = useScene.getState().nodes
const walls = collectLevelWalls(sceneNodes, node.id)
// Endpoint move = grid snap, never 45° from the fixed corner.
// Shift bypasses grid, magnetic, and alignment snap.
const snapped = snapWallDraftPoint({
point: planPoint as WallPlanPoint,
walls,
ignoreWallIds: [node.id],
bypassSnap: modifiers.shiftKey,
magnetic: !modifiers.shiftKey && isMagneticSnapActive(),
magnetic: isMagneticSnapActive(),
gridSnap: (p) => snapBuildingLocalToWorldGrid(p, WALL_GRID_STEP),
})
// Figma-style alignment on the dragged corner — snaps it onto another
@@ -202,7 +196,6 @@ export const wallMoveEndpointAffordance: FloorplanAffordance<WallNode> = {
// and its linked siblings (which cascade with the corner) are excluded
// from the candidate pool. Alt is reserved for detach, NOT bypass.
const aligned = alignFloorplanDraftPoint(snapped, {
bypass: modifiers.shiftKey,
excludeIds: [node.id, ...linkedWalls.map((w) => w.id)],
}) as WallPlanPoint
packages/nodes/src/wall/floorplan-move.ts
+5 -5
View File
@@ -105,7 +105,7 @@ export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node })
const session: FloorplanMoveTargetSession = {
affectedIds: [wallId, ...linkedOriginals.map((w) => w.id as AnyNodeId)],
apply({ planPoint, modifiers }) {
apply({ planPoint }) {
if (!rawAnchor) {
rawAnchor = [planPoint[0], planPoint[1]]
return
@@ -119,19 +119,19 @@ export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node })
// the original centre + raw cursor delta onto the axis, snap the
// absolute projection to a grid multiple, then translate the wall
// by `axis * perpDelta`. Matches `MoveWallTool` so 2D and 3D drag
// produce identical wall topology. Shift bypasses snap.
// produce identical wall topology.
let dx: number
let dz: number
if (moveAxis) {
const originalProj = originalCenter[0] * moveAxis[0] + originalCenter[1] * moveAxis[1]
const rawProj = originalProj + rawDx * moveAxis[0] + rawDz * moveAxis[1]
const snappedProj = modifiers.shiftKey ? rawProj : snapScalarToGrid(rawProj, step)
const snappedProj = snapScalarToGrid(rawProj, step)
const perpDelta = snappedProj - originalProj
dx = moveAxis[0] * perpDelta
dz = moveAxis[1] * perpDelta
} else {
dx = modifiers.shiftKey ? rawDx : snapScalarToGrid(rawDx, step)
dz = modifiers.shiftKey ? rawDz : snapScalarToGrid(rawDz, step)
dx = snapScalarToGrid(rawDx, step)
dz = snapScalarToGrid(rawDz, step)
}
if (dx === lastDelta[0] && dz === lastDelta[1]) return
packages/nodes/src/wall/move-endpoint-tool.tsx
+11 -21
View File
@@ -19,6 +19,7 @@ import {
formatAngleRadians,
getAngleToSegmentReference,
getSegmentAngleReferenceAtPoint,
isAngleSnapActive,
isMagneticSnapActive,
isSegmentLongEnough,
MeasurementPill,
@@ -177,7 +178,6 @@ function getLinkedWallUpdates(
export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({ target }) => {
const hasDraggedRef = useRef(false)
const previousGridPosRef = useRef<WallPlanPoint | null>(null)
const shiftPressedRef = useRef(false)
const altPressedRef = useRef(false)
const nodeIdRef = useRef(target.wall.id)
const originalStartRef = useRef<WallPlanPoint>([...target.wall.start] as WallPlanPoint)
@@ -288,21 +288,17 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
const onGridMove = (event: GridEvent) => {
const planPoint: WallPlanPoint = [event.localPosition[0], event.localPosition[2]]
// Endpoint *move* snaps to the grid (and to other wall corners) —
// 45° angle snap is for the initial draft, where it gives clean
// orthogonal corners; here it would fight every perpendicular
// drag by warping the endpoint onto the nearest 45° line from
// the fixed corner.
//
// Shift is a hard snap bypass: raw endpoint position, no grid,
// no magnetic wall snap, and no alignment guide snap.
const bypassSnap = shiftPressedRef.current || event.nativeEvent.shiftKey
// Endpoint move honours the active snapping mode (the HUD chip): grid →
// lattice; lines → magnetic corner/alignment snap; angles → lock the
// segment to 15° rays from the FIXED corner; off → raw. No Shift bypass —
// Shift cycles the mode now, and Off is the bypass.
const snapResult = snapWallDraftPointDetailed({
point: planPoint,
walls: levelWalls,
ignoreWallIds: [nodeId],
bypassSnap,
magnetic: !bypassSnap && isMagneticSnapActive(),
start: fixedPoint,
angleSnap: isAngleSnapActive(),
magnetic: isMagneticSnapActive(),
})
const snappedPoint = snapResult.point
@@ -312,8 +308,10 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
// candidate, so the dot always sits on an actual point (endpoint /
// midpoint), never an empty-space bbox corner. Layered on top of the
// grid + corner snap above; Alt is reserved for corner-detach here.
// Alignment axes are the "Lines" snap, so gate them on the magnetic flag —
// Off / Grid / Angles must not pull the endpoint onto other elements' lines.
let alignedPoint = snappedPoint
if (!bypassSnap && wallAlignmentCandidates.length > 0) {
if (isMagneticSnapActive() && wallAlignmentCandidates.length > 0) {
const ar = resolveAlignment({
moving: [{ nodeId, kind: 'corner', x: snappedPoint[0], z: snappedPoint[1] }],
candidates: wallAlignmentCandidates,
@@ -328,7 +326,6 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
}
if (
!bypassSnap &&
previousGridPosRef.current &&
(alignedPoint[0] !== previousGridPosRef.current[0] ||
alignedPoint[1] !== previousGridPosRef.current[1])
@@ -414,9 +411,6 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
return
}
if (event.key === 'Shift') {
shiftPressedRef.current = true
}
if (event.key === 'Alt') {
altPressedRef.current = true
setAltPressed(true)
@@ -424,9 +418,6 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
}
const onKeyUp = (event: KeyboardEvent) => {
if (event.key === 'Shift') {
shiftPressedRef.current = false
}
if (event.key === 'Alt') {
altPressedRef.current = false
setAltPressed(false)
@@ -434,7 +425,6 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
}
const onWindowBlur = () => {
shiftPressedRef.current = false
altPressedRef.current = false
setAltPressed(false)
}
packages/nodes/src/wall/move-tool.tsx
+2 -22
View File
@@ -66,7 +66,7 @@ import {
* operation.
* - **`isNew` metadata strip** — first commit after a fresh wall
* placement clears the placement marker.
* - **Activation grace** (150ms) + Shift to bypass grid snap.
* - **Activation grace** (150ms).
*
* Mounted via `def.affordanceTools.move` from `wall/definition.ts`.
*/
@@ -190,7 +190,6 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
const nodeIdRef = useRef(node.id)
const previewRef = useRef<{ start: [number, number]; end: [number, number] } | null>(null)
const pendingRotationRef = useRef(0)
const shiftPressedRef = useRef(false)
const [cursorLocalPos, setCursorLocalPos] = useState<[number, number, number]>(() => {
const centerX = (node.start[0] + node.end[0]) / 2
@@ -462,7 +461,6 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
}
const onGridMove = (event: GridEvent) => {
const bypassSnap = shiftPressedRef.current || event.nativeEvent?.shiftKey === true
const rawX = event.localPosition[0]
const rawZ = event.localPosition[2]
const snapStep = getSegmentGridStep()
@@ -493,13 +491,10 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
if (axis) {
const originalProj = originalCenter[0] * axis[0] + originalCenter[1] * axis[1]
const rawProj = originalProj + rawDeltaX * axis[0] + rawDeltaZ * axis[1]
const snappedProj = bypassSnap ? rawProj : snapScalarToGrid(rawProj, snapStep)
const snappedProj = snapScalarToGrid(rawProj, snapStep)
const perpDelta = snappedProj - originalProj
deltaX = axis[0] * perpDelta
deltaZ = axis[1] * perpDelta
} else if (bypassSnap) {
deltaX = rawDeltaX
deltaZ = rawDeltaZ
} else {
// Snap the resulting wall center to the WORLD XZ grid (projected
// back into building-local), then express the result as a delta
@@ -517,7 +512,6 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
const constrainedGridPos: [number, number] = [anchor[0] + deltaX, anchor[1] + deltaZ]
if (
!bypassSnap &&
previousGridPosRef.current &&
(constrainedGridPos[0] !== previousGridPosRef.current[0] ||
constrainedGridPos[1] !== previousGridPosRef.current[1])
@@ -633,11 +627,6 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
return
}
if (event.key === 'Shift') {
shiftPressedRef.current = true
return
}
const ROTATION_STEP = Math.PI / 4
let rotationDelta = 0
if (event.key === 'r' || event.key === 'R') rotationDelta = ROTATION_STEP
@@ -661,12 +650,6 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
applyPreview(nextWall.start, nextWall.end)
}
const onKeyUp = (event: KeyboardEvent) => {
if (event.key === 'Shift') {
shiftPressedRef.current = false
}
}
const onCancel = () => {
shouldRestoreOnCleanup = false
restoreOriginal()
@@ -683,7 +666,6 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
emitter.on('tool:cancel', onCancel)
window.addEventListener('pointerup', onPointerUp)
window.addEventListener('keydown', onKeyDown)
window.addEventListener('keyup', onKeyUp)
return () => {
if (shouldRestoreOnCleanup) {
@@ -698,13 +680,11 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
restoreOriginal()
}
}
shiftPressedRef.current = false
resumeSceneHistory(useScene)
emitter.off('grid:move', onGridMove)
emitter.off('tool:cancel', onCancel)
window.removeEventListener('pointerup', onPointerUp)
window.removeEventListener('keydown', onKeyDown)
window.removeEventListener('keyup', onKeyUp)
}
}, [exitMoveMode, isNew, node.metadata, node.parentId])
packages/nodes/src/wall/paint.ts
+1
View File
@@ -104,6 +104,7 @@ function applyWallPreview(args: PaintPreviewArgs): (() => void) | null {
* picker still shows the current value on a pre-migration scene.
*/
export const wallPaint: PaintCapability = createSlotPaintCapability({
roomScope: true,
resolveRole: ({ node, materialIndex, normal, localPosition }) =>
resolveWallRole({ node: node as WallNode, materialIndex, normal, localPosition }),
applyPreview: applyWallPreview,
packages/nodes/src/wall/tool.tsx
+4 -2
View File
@@ -554,7 +554,8 @@ export const WallTool: React.FC = () => {
// angles / off). `'off'` is the bypass — there is no Shift hold-to-bypass.
// Alt still bypasses Figma-style alignment guides independently.
const angleLocked = buildingState.current === 1 && isAngleSnapActive()
const bypassAlign = event.nativeEvent?.altKey === true
// Alignment guides follow the snapping mode (lines = magnetic on), not Alt.
const bypassAlign = !isMagneticSnapActive()
const snapResult = snapWallDraftPointDetailed({
point: localPoint,
walls,
@@ -634,7 +635,8 @@ export const WallTool: React.FC = () => {
const walls = getCurrentLevelWalls()
const localClick: WallPlanPoint = [event.localPosition[0], event.localPosition[2]]
const bypassAlign = event.nativeEvent?.altKey === true
// Alignment guides follow the snapping mode (lines = magnetic on), not Alt.
const bypassAlign = !isMagneticSnapActive()
if (buildingState.current === 0) {
const snappedStart = alignPoint(
packages/nodes/src/window/definition.ts
-1
View File
@@ -229,7 +229,6 @@ export const windowDefinition: NodeDefinition<typeof WindowNode> = {
toolHints: [
{ key: 'Left click', label: 'Place window on wall' },
{ key: 'Shift', label: 'Free place' },
{ key: 'Esc', label: 'Cancel' },
],
packages/nodes/src/zone/definition.ts
+1
View File
@@ -17,6 +17,7 @@ import { ZoneNode } from './schema'
*/
export const zoneDefinition: NodeDefinition<typeof ZoneNode> = {
kind: 'zone',
snapProfile: 'structural',
schemaVersion: 1,
schema: ZoneNode,
category: 'site',