fix(editor): improve guided manipulation and snap affordances

2026-06-11 23:59:15 -04:00
parent aab48e053f
commit 5411f5abc8
89 changed files with 2830 additions and 518 deletions
@@ -219,6 +219,7 @@ export const doorDefinition: NodeDefinition<typeof DoorNode> = {

  toolHints: [
    { key: 'Left click', label: 'Place door on wall' },
+    { key: 'Shift', label: 'Free place' },
    { key: 'Esc', label: 'Cancel' },
  ],

@@ -15,6 +15,7 @@ import {
 import {
  calculateCursorRotation,
  calculateItemRotation,
+  consumePlacementDragRelease,
  EDITOR_LAYER,
  getSideFromNormal,
  isValidWallSideFace,
@@ -80,6 +81,7 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>

    let currentHostId: string | null = movingDoorNode.parentId
    let dragAnchor: { wallId: string; rawX: number; startX: number } | null = null
+    let committed = false
    let lastTarget: {
      wallNode: WallEvent['node']
      wallId: string
@@ -91,6 +93,7 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
      valid: boolean
      event: WallEvent
    } | null = null
+    let lastRoofEvent: RoofEvent | null = null

    const markHostDirty = (hostId: string | null) => {
      if (hostId) useScene.getState().dirtyNodes.add(hostId as AnyNodeId)
@@ -254,34 +257,50 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>

    const onWallEnter = (event: WallEvent) => {
      const target = resolveMoveTarget(event)
-      if (!target) return
+      if (!target) {
+        onWallLeave()
+        return
+      }
      lastTarget = target
+      lastRoofEvent = null
      applyPreview(target)
      event.stopPropagation()
    }

    const onWallMove = (event: WallEvent) => {
-      if (!isValidWallSideFace(event.normal)) return
+      if (!isValidWallSideFace(event.normal)) {
+        onWallLeave()
+        return
+      }
      if (isCurvedWall(event.node)) {
-        hideCursor()
+        onWallLeave()
+        return
+      }
+      if (event.node.parentId !== getLevelId()) {
+        onWallLeave()
        return
      }
-      if (event.node.parentId !== getLevelId()) return

      const target = resolveMoveTarget(event)
-      if (!target) return
+      if (!target) {
+        onWallLeave()
+        return
+      }
      lastTarget = target
+      lastRoofEvent = null
      applyPreview(target)
      event.stopPropagation()
    }

    const onWallClick = (event: WallEvent) => {
+      if (committed) return
      if (!isValidWallSideFace(event.normal)) return
      if (isCurvedWall(event.node)) return
      if (event.node.parentId !== getLevelId()) return

      const target = lastTarget?.wallId === event.node.id ? lastTarget : resolveMoveTarget(event)
      if (!target?.valid) return
+      committed = true

      let placedId: string

@@ -349,6 +368,7 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
      useLiveTransforms.getState().clear(movingDoorNode.id)
      dragAnchor = null
      lastTarget = null
+      lastRoofEvent = null
      if (isNew) return
      if (currentHostId && currentHostId !== original.parentId) {
        markHostDirty(currentHostId)
@@ -387,10 +407,14 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>

    const onRoofHover = (event: RoofEvent) => {
      const target = resolveRoofMoveTarget(event)
-      if (!target) return
+      if (!target) {
+        onRoofLeave()
+        return
+      }
      // Wall-frame drag anchor / live transform don't apply on a roof face.
      dragAnchor = null
      lastTarget = null
+      lastRoofEvent = event
      useLiveTransforms.getState().clear(movingDoorNode.id)
      if (currentHostId !== target.segment.id) {
        useScene.getState().updateNode(movingDoorNode.id, {
@@ -416,8 +440,10 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
    }

    const onRoofClick = (event: RoofEvent) => {
+      if (committed) return
      const target = resolveRoofMoveTarget(event)
      if (!target?.valid) return
+      committed = true
      const segmentId = target.segment.id

      let placedId: string
@@ -487,6 +513,7 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
      useLiveTransforms.getState().clear(movingDoorNode.id)
      dragAnchor = null
      lastTarget = null
+      lastRoofEvent = null
      if (isNew) return
      if (currentHostId && currentHostId !== original.parentId) {
        markHostDirty(currentHostId)
@@ -527,6 +554,15 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
      exitMoveMode()
    }

+    const onPlacementDragPointerUp = (event: PointerEvent) => {
+      if (!consumePlacementDragRelease(event)) return
+      if (lastTarget) {
+        onWallClick(lastTarget.event)
+        return
+      }
+      if (lastRoofEvent) onRoofClick(lastRoofEvent)
+    }
+
    emitter.on('wall:enter', onWallEnter)
    emitter.on('wall:move', onWallMove)
    emitter.on('wall:click', onWallClick)
@@ -536,6 +572,7 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
    emitter.on('roof:click', onRoofClick)
    emitter.on('roof:leave', onRoofLeave)
    emitter.on('tool:cancel', onCancel)
+    window.addEventListener('pointerup', onPlacementDragPointerUp)

    return () => {
      const current = useScene.getState().nodes[movingDoorNode.id as AnyNodeId] as
@@ -572,6 +609,7 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
      emitter.off('roof:click', onRoofClick)
      emitter.off('roof:leave', onRoofLeave)
      emitter.off('tool:cancel', onCancel)
+      window.removeEventListener('pointerup', onPlacementDragPointerUp)
    }
  }, [movingDoorNode, exitMoveMode])

@@ -3,6 +3,7 @@ import {
  collectAlignmentAnchors,
  DoorNode,
  emitter,
+  type GridEvent,
  isCurvedWall,
  type RoofEvent,
  type RoofNode,
@@ -22,12 +23,13 @@ import {
 } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useRef } from 'react'
-import { BoxGeometry, EdgesGeometry, type Group, type LineSegments } from 'three'
+import { BoxGeometry, EdgesGeometry, type Group, type LineSegments, Vector3 } from 'three'
 import { LineBasicNodeMaterial } from 'three/webgpu'
 import {
  getRoofWallOpeningCursorPose,
  type RoofWallOpeningTarget,
  resolveRoofWallOpeningTarget,
+  worldToSelectedBuildingLocal,
 } from '../shared/roof-wall-opening-placement'
 import { resolveWallSlideAlignment } from '../shared/wall-opening-alignment'
 import { clampToWall, hasWallChildOverlap, wallLocalToWorld } from './door-math'
@@ -39,6 +41,10 @@ const edgeMaterial = new LineBasicNodeMaterial({
  depthWrite: false,
 })

+const FALLBACK_WIDTH = 0.9
+const FALLBACK_HEIGHT = 2.1
+const roofFallbackPoint = new Vector3()
+
 /**
 * Door tool — places DoorNodes on walls and on roof-segment wall faces
 * (the generated base walls under a roof, including coplanar gable ends).
@@ -99,16 +105,47 @@ const DoorTool: React.FC = () => {
      edgeMaterial.color.setHex(valid ? 0x22_c5_5e : 0xef_44_44)
    }

+    const showFallbackCursor = (event: GridEvent) => {
+      if (draftRef.current) return
+      const [x, y, z] = event.localPosition
+      updateCursor([x, y + FALLBACK_HEIGHT / 2, z], 0, false)
+      useAlignmentGuides.getState().clear()
+    }
+
+    const showRoofFallbackCursor = (event: RoofEvent) => {
+      const [x, , z] = worldToSelectedBuildingLocal(roofFallbackPoint.set(...event.position))
+      updateCursor([x, getLevelYOffset() + FALLBACK_HEIGHT / 2, z], 0, false)
+      useAlignmentGuides.getState().clear()
+    }
+
+    const showWallFallbackCursor = (event: WallEvent) => {
+      const [x, , z] = worldToSelectedBuildingLocal(roofFallbackPoint.set(...event.position))
+      updateCursor([x, getLevelYOffset() + FALLBACK_HEIGHT / 2, z], 0, false)
+      useAlignmentGuides.getState().clear()
+    }
+
    const onWallEnter = (event: WallEvent) => {
-      if (!isValidWallSideFace(event.normal)) return
+      if (!isValidWallSideFace(event.normal)) {
+        destroyDraft()
+        showWallFallbackCursor(event)
+        return
+      }
      if (isCurvedWall(event.node)) {
        destroyDraft()
-        hideCursor()
+        showWallFallbackCursor(event)
        return
      }
      const levelId = getLevelId()
-      if (!levelId) return
-      if (event.node.parentId !== levelId) return
+      if (!levelId) {
+        destroyDraft()
+        showWallFallbackCursor(event)
+        return
+      }
+      if (event.node.parentId !== levelId) {
+        destroyDraft()
+        showWallFallbackCursor(event)
+        return
+      }

      destroyDraft()

@@ -158,13 +195,21 @@ const DoorTool: React.FC = () => {
    }

    const onWallMove = (event: WallEvent) => {
-      if (!isValidWallSideFace(event.normal)) return
-      if (isCurvedWall(event.node)) {
+      if (!isValidWallSideFace(event.normal)) {
        destroyDraft()
-        hideCursor()
+        showWallFallbackCursor(event)
+        return
+      }
+      if (isCurvedWall(event.node)) {
+        destroyDraft()
+        showWallFallbackCursor(event)
+        return
+      }
+      if (event.node.parentId !== getLevelId()) {
+        destroyDraft()
+        showWallFallbackCursor(event)
        return
      }
-      if (event.node.parentId !== getLevelId()) return

      const side = getSideFromNormal(event.normal)
      const itemRotation = calculateItemRotation(event.normal)
@@ -373,10 +418,8 @@ const DoorTool: React.FC = () => {
      if (!target) {
        // On the roof but not over a placeable wall face (slope, soffit,
        // or a face the door cannot fit on).
-        if (draftRef.current?.roofSegmentId) {
-          destroyDraft()
-          hideCursor()
-        }
+        destroyDraft()
+        showRoofFallbackCursor(event)
        return
      }
      const { segment, face, position } = target
@@ -483,6 +526,7 @@ const DoorTool: React.FC = () => {
    emitter.on('roof:move', onRoofHover)
    emitter.on('roof:click', onRoofClick)
    emitter.on('roof:leave', onRoofLeave)
+    emitter.on('grid:move', showFallbackCursor)
    emitter.on('tool:cancel', onCancel)

    return () => {
@@ -498,12 +542,13 @@ const DoorTool: React.FC = () => {
      emitter.off('roof:move', onRoofHover)
      emitter.off('roof:click', onRoofClick)
      emitter.off('roof:leave', onRoofLeave)
+      emitter.off('grid:move', showFallbackCursor)
      emitter.off('tool:cancel', onCancel)
    }
  }, [])

-  // Cursor geometry: door outline (default 0.9 × 2.1 × 0.07)
-  const boxGeo = new BoxGeometry(0.9, 2.1, 0.07)
+  // Cursor geometry: door outline.
+  const boxGeo = new BoxGeometry(FALLBACK_WIDTH, FALLBACK_HEIGHT, 0.07)
  const edgesGeo = new EdgesGeometry(boxGeo)
  boxGeo.dispose()