@pascal-app/editor 1.0.0 → 1.0.3

package/src/components/editor/group-floating-action-menu.tsx

@@ -15,7 +15,12 @@ import useSessionGroups, {
   ungroupCurrentSelection,
 } from '../../store/use-session-groups'
 import { deleteSelection, duplicateSelectionAndPickUp, startGroupPickUp } from './group-actions'
-import { classifyParticipant, computeGroupBox, expandToComponent } from './group-transform-shared'
+import {
+  classifyParticipant,
+  computeGroupBox,
+  computeGroupPlanBox,
+  levelFrame,
+} from './group-transform-shared'
 import { NodeActionMenu } from './node-action-menu'
 import { useMeshSettleEpoch } from './use-mesh-settle-epoch'
 
@@ -69,15 +74,20 @@ export function GroupFloatingActionMenu() {
   const anchor = useMemo(() => {
     void meshEpoch
     if (participantIds.length === 0) return null
-    const fullIds = expandToComponent(participantIds, nodes, levelId)
-    const box = computeGroupBox(fullIds)
+    const box = computeGroupBox(participantIds)
     if (!box) return null
-    return new THREE.Vector3(
-      (box.min.x + box.max.x) / 2,
-      box.max.y + MENU_Y_OFFSET,
-      (box.min.z + box.max.z) / 2,
-    )
-  }, [participantIds, nodes, levelId, meshEpoch])
+    // Over the level-frame box's centre (the dashed boxes' and gizmo's), so the
+    // pill stays on the box under a rotated building; the mesh box gives the top.
+    const levelId = useViewer.getState().selection.levelId
+    const plan = computeGroupPlanBox(participantIds, levelId)
+    const anchor = plan
+      ? new THREE.Vector3((plan.minX + plan.maxX) / 2, 0, (plan.minZ + plan.maxZ) / 2).applyMatrix4(
+          levelFrame(levelId).matrix,
+        )
+      : new THREE.Vector3((box.min.x + box.max.x) / 2, 0, (box.min.z + box.max.z) / 2)
+    anchor.y = box.max.y + MENU_Y_OFFSET
+    return anchor
+  }, [participantIds, meshEpoch])
 
   useFrame((state) => {
     if (!(menuScaleRef.current && groupRef.current)) return

package/src/components/editor/group-move-3d.ts

@@ -31,7 +31,6 @@ import {
   classifyParticipant,
   collectParticipants,
   computeGroupBox,
-  expandToComponent,
   type GroupPlanBounds,
   groupPlanBounds,
   levelFrame,
@@ -107,16 +106,15 @@ export function armGroupMove3d(args: {
     const participantIds = selectedIds.filter(
       (id) => classifyParticipant(nodes[id as AnyNodeId], levelId, nodes) !== null,
     )
-    // Move the full connected wall/fence component, mirroring the 2D session.
-    const fullIds = expandToComponent(participantIds, nodes, levelId)
-    const { starts, links } = collectParticipants(fullIds, nodes, levelId)
+    // Only the selection moves; connected walls stretch through `links`, as in 2D.
+    const { starts, links } = collectParticipants(participantIds, nodes, levelId)
     if (starts.length === 0) return null
     const affectedIds: AnyNodeId[] = [...starts.map((s) => s.id), ...links.map((l) => l.id)]
 
     // Horizontal drag plane at the group's base; placements live in the level
     // frame, so world-space plane hits convert through it (a rotated building
     // would otherwise drift off-axis from the cursor).
-    const restBox = computeGroupBox(fullIds)
+    const restBox = computeGroupBox(participantIds)
     if (!restBox) return null
     const plane = new Plane(new Vector3(0, 1, 0), -restBox.min.y)
     const { inverse: frameInv } = levelFrame(levelId)
@@ -136,7 +134,7 @@ export function armGroupMove3d(args: {
       if (n && !movingIdSet.has(nid)) staticNodes[nid] = n
     }
     const candidates = collectAlignmentAnchors(staticNodes, '', levelId)
-    const restBounds = groupPlanBounds(restBox, starts, frameInv)
+    const restBounds = groupPlanBounds(starts, frameInv)
     if (!restBounds) return null
     const restAnchors = bboxCornerAnchors(
       'group-move',

package/src/components/editor/group-rotate-handle.tsx

@@ -13,11 +13,13 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { createPortal, type ThreeEvent, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { OrthographicCamera, Plane, Vector2, Vector3 } from 'three'
+import { OrthographicCamera, Plane, type Ray, Vector2, Vector3 } from 'three'
 import { GROUP_MOVE_DRAG_LABEL, GROUP_ROTATE_DRAG_LABEL } from '../../lib/contextual-help'
 import { isHistoryShortcut } from '../../lib/history'
 import { sfxEmitter } from '../../lib/sfx-bus'
-import useEditor from '../../store/use-editor'
+import { intersectSpatialDragPlane } from '../../lib/spatial-drag-plane'
+import { getSpatialPointerId, spatialPointerInput } from '../../lib/spatial-pointer-input'
+import useEditor, { isAngleSnapActive } from '../../store/use-editor'
 import useInteractionScope, {
   useActiveHandleDrag,
   useMovingNode,
@@ -28,7 +30,7 @@ import {
   classifyParticipant,
   collectParticipants,
   computeGroupBox,
-  expandToComponent,
+  computeGroupPlanBox,
   levelFrame,
   rotateGroupPatches,
   type Vec3,
@@ -79,14 +81,6 @@ export function GroupRotateHandle() {
     [selectedIds, levelId, nodes],
   )
 
-  // Gate on the explicit selection (so a single connected wall still gets the
-  // per-node handles), but transform the full connected wall/fence component so
-  // attached structure rotates rigidly as one piece.
-  const fullIds = useMemo(
-    () => expandToComponent(participantIds, nodes, levelId),
-    [participantIds, levelId, nodes],
-  )
-
   const shouldRender =
     participantIds.length >= 2 &&
     mode !== 'delete' &&
@@ -98,7 +92,13 @@ export function GroupRotateHandle() {
 
   if (!shouldRender) return null
   // Remount when the moving set changes so the rest pivot re-seeds cleanly.
-  return <GroupRotateHandleInner ids={fullIds} key={fullIds.join(',')} meshEpoch={meshEpoch} />
+  return (
+    <GroupRotateHandleInner
+      ids={participantIds}
+      key={participantIds.join(',')}
+      meshEpoch={meshEpoch}
+    />
+  )
 }
 
 function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch: number }) {
@@ -125,22 +125,28 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
   const baseScale = zoom * ARROW_SCALE * 1.05
   const scale = (isHovered ? 1.12 : 1) * baseScale
 
-  // World-space bounding box of the selected meshes. Levels are axis-aligned in
-  // XZ, so world XZ coincides with each node's level-local placement — letting
-  // us rotate `position` / `start` / `end` directly against the pivot without
-  // per-node frame conversion.
-  //   - `pivot`  = bbox center (XZ), Y at the group's base → the rotation origin
-  //   - `corner` = front-right bbox corner at mid-height → where the gizmo sits
+  // Both rest points come from the level-frame box (the dashed boxes' box, also
+  // keyboard R/T's pivot), carried to world so they stay on it under a rotated
+  // building; the world mesh box only supplies heights.
+  //   - `pivot`  = box center, Y at the group's base → the rotation origin
+  //   - `corner` = far box corner at mid-height → where the gizmo sits
   const rest = useMemo(() => {
     void meshEpoch
     const box = computeGroupBox(ids)
     if (!box) return null
-    const pivot = new Vector3((box.min.x + box.max.x) / 2, box.min.y, (box.min.z + box.max.z) / 2)
-    const corner = new Vector3(
-      box.max.x + CORNER_OFFSET,
-      (box.min.y + box.max.y) / 2,
-      box.max.z + CORNER_OFFSET,
-    )
+    const levelId = useViewer.getState().selection.levelId
+    const { matrix } = levelFrame(levelId)
+    const plan = computeGroupPlanBox(ids, levelId)
+    const pivot = plan
+      ? new Vector3((plan.minX + plan.maxX) / 2, 0, (plan.minZ + plan.maxZ) / 2).applyMatrix4(
+          matrix,
+        )
+      : new Vector3((box.min.x + box.max.x) / 2, 0, (box.min.z + box.max.z) / 2)
+    pivot.y = box.min.y
+    const corner = plan
+      ? new Vector3(plan.maxX + CORNER_OFFSET, 0, plan.maxZ + CORNER_OFFSET).applyMatrix4(matrix)
+      : new Vector3(box.max.x + CORNER_OFFSET, 0, box.max.z + CORNER_OFFSET)
+    corner.y = (box.min.y + box.max.y) / 2
     return { pivot, corner }
   }, [ids, meshEpoch])
 
@@ -163,6 +169,12 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
     if (event.button !== 0) return
     event.stopPropagation()
     suppressBoxSelectForPointer(event)
+    const spatialPointerId = getSpatialPointerId(event.nativeEvent)
+    const spatialRay = spatialPointerId ? event.ray.clone() : null
+    const pointerTarget = event.object as typeof event.object & {
+      releasePointerCapture?: (pointerId: number) => void
+      setPointerCapture?: (pointerId: number) => void
+    }
 
     frozenRest.current = { pivot: rest.pivot.clone(), corner: rest.corner.clone() }
     const center = rest.pivot.clone()
@@ -213,11 +225,15 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
       )
     }
 
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
+    if (!spatialRay) {
+      setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+      raycaster.setFromCamera(ndc, camera)
+    }
     const hit = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hit)) return
+    if (!intersectSpatialDragPlane(spatialRay ?? raycaster.ray, plane, hit)) return
     const initialAngle = angleOf(hit)
+    if (spatialPointerId) pointerTarget.setPointerCapture?.(event.pointerId)
+    let altKey = event.nativeEvent.altKey
 
     document.body.style.cursor = 'grabbing'
     sfxEmitter.emit('sfx:item-pick')
@@ -230,15 +246,14 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
     })
     setIsDragging(true)
 
-    const onMove = (e: PointerEvent) => {
-      setNDC(e.clientX, e.clientY)
-      raycaster.setFromCamera(ndc, camera)
+    const applyRay = (ray: Ray, freeRotation = false) => {
       const moveHit = new Vector3()
-      if (!raycaster.ray.intersectPlane(plane, moveHit)) return
+      if (!intersectSpatialDragPlane(ray, plane, moveHit)) return
       let delta = angleOf(moveHit) - initialAngle
       while (delta > Math.PI) delta -= 2 * Math.PI
       while (delta < -Math.PI) delta += 2 * Math.PI
-      if (!e.shiftKey) delta = Math.round(delta / DEFAULT_ANGLE_STEP) * DEFAULT_ANGLE_STEP
+      if (!freeRotation && isAngleSnapActive())
+        delta = Math.round(delta / DEFAULT_ANGLE_STEP) * DEFAULT_ANGLE_STEP
 
       // Shared rigid-rotation math (also used by the keyboard group R/T);
       // see `rotateGroupPatches` for the orbit/yaw handedness contract.
@@ -286,8 +301,14 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
         })
       }
     }
+    const onMove = (e: PointerEvent) => {
+      setNDC(e.clientX, e.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      applyRay(raycaster.ray, e.altKey)
+    }
 
     const affectedIds: AnyNodeId[] = [...starts.map((s) => s.id), ...links.map((l) => l.id)]
+    let releaseSpatialCapture: (() => void) | null = null
     const clearLivePreviews = () => {
       const overrides = useLiveNodeOverrides.getState()
       const liveTransforms = useLiveTransforms.getState()
@@ -303,6 +324,10 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
       window.removeEventListener('pointerup', onUp)
       window.removeEventListener('pointercancel', onCancel)
       window.removeEventListener('keydown', onKeyDown, true)
+      window.removeEventListener('keyup', onKeyUp, true)
+      releaseSpatialCapture?.()
+      releaseSpatialCapture = null
+      if (spatialPointerId) pointerTarget.releasePointerCapture?.(event.pointerId)
       if (document.body.style.cursor === 'grabbing') document.body.style.cursor = ''
       useScene.temporal.getState().resume()
       useViewer.getState().setInputDragging(false)
@@ -352,12 +377,19 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
     // Escape / ⌘Z abort the rotate — capture phase so they win over the global
     // use-keyboard arms (⌘Z must never history-jump under a live pointer).
     const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Alt') {
+        altKey = true
+        return
+      }
       if (e.key !== 'Escape' && !isHistoryShortcut(e)) return
       e.preventDefault()
       e.stopPropagation()
       swallowNextClick()
       onCancel()
     }
+    const onKeyUp = (e: KeyboardEvent) => {
+      if (e.key === 'Alt') altKey = false
+    }
 
     dragCleanupRef.current = () => {
       clearLivePreviews()
@@ -366,10 +398,22 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
     for (const id of affectedIds) {
       useLiveTransforms.getState().clear(id)
     }
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
+    if (spatialPointerId && spatialRay) {
+      releaseSpatialCapture = spatialPointerInput.capture(spatialPointerId, {
+        onMove: (ray) => {
+          spatialRay.copy(ray)
+          applyRay(spatialRay, altKey)
+        },
+        onRelease: onUp,
+        onCancel,
+      })
+    } else {
+      window.addEventListener('pointermove', onMove)
+      window.addEventListener('pointerup', onUp)
+      window.addEventListener('pointercancel', onCancel)
+    }
     window.addEventListener('keydown', onKeyDown, true)
+    window.addEventListener('keyup', onKeyUp, true)
   }
 
   return createPortal(
@@ -398,6 +442,7 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
           onPointerDown={activate}
           onPointerEnter={onHoverEnter}
           onPointerLeave={onHoverLeave}
+          {...({ pointerEventsOrder: 10 } as Record<string, unknown>)}
           scale={baseScale}
         />
         <mesh
@@ -407,6 +452,7 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
           onPointerDown={activate}
           onPointerEnter={onHoverEnter}
           onPointerLeave={onHoverLeave}
+          {...({ pointerEventsOrder: 10 } as Record<string, unknown>)}
           renderOrder={1010}
           scale={scale}
         />

package/src/components/editor/group-selection-box-3d.tsx

@@ -12,7 +12,7 @@ import { armGroupMove3d } from './group-move-3d'
 import {
   classifyParticipant,
   computeGroupBox,
-  expandToComponent,
+  computeGroupPlanBox,
   levelFrame,
 } from './group-transform-shared'
 import { useMeshSettleEpoch } from './use-mesh-settle-epoch'
@@ -24,8 +24,8 @@ const BOX_PAD = 0.06
 
 /**
  * 3D sibling of the 2D dashed group selection box: a dashed wireframe around
- * the multi-selection's transformable participants (expanded to the welded
- * wall/fence component) that doubles as the group's whole-volume drag
+ * the multi-selection's transformable participants that doubles as the
+ * group's whole-volume drag
  * handle — move cursor across it, press-drag anywhere on it slides the group,
  * a plain click picks it up. Holding a selection modifier passes the press
  * through so members inside can still be toggled. Rides the live drag delta
@@ -55,22 +55,30 @@ export function GroupSelectionBox3D() {
   const box = useMemo(() => {
     void meshEpoch
     if (participantIds.length === 0) return null
-    const fullIds = expandToComponent(participantIds, nodes, levelId)
-    const world = computeGroupBox(fullIds)
-    if (!world) return null
-    const size = new THREE.Vector3()
-    world.getSize(size)
-    const center = new THREE.Vector3()
-    world.getCenter(center)
+    // Aligned with the building like the 2D box: level-frame footprint, world
+    // height span, turned by the level's rotation.
+    const world = computeGroupBox(participantIds)
+    const { matrix } = levelFrame(levelId)
+    const plan = computeGroupPlanBox(participantIds, levelId)
+    if (!(world && plan)) return null
+    const center = new THREE.Vector3(
+      (plan.minX + plan.maxX) / 2,
+      0,
+      (plan.minZ + plan.maxZ) / 2,
+    ).applyMatrix4(matrix)
+    center.y = (world.min.y + world.max.y) / 2
+    const quaternion = new THREE.Quaternion()
+    matrix.decompose(new THREE.Vector3(), quaternion, new THREE.Vector3())
     return {
-      size: [size.x + 2 * BOX_PAD, size.y + 2 * BOX_PAD, size.z + 2 * BOX_PAD] as [
-        number,
-        number,
-        number,
-      ],
+      size: [
+        plan.maxX - plan.minX + 2 * BOX_PAD,
+        world.max.y - world.min.y + 2 * BOX_PAD,
+        plan.maxZ - plan.minZ + 2 * BOX_PAD,
+      ] as [number, number, number],
       center,
+      quaternion,
     }
-  }, [participantIds, nodes, levelId, meshEpoch])
+  }, [participantIds, levelId, meshEpoch])
 
   // Dashed wireframe. Built per box size (rare — selection / commit changes)
   // because LineDashedMaterial measures dashes along the line, so scaling a
@@ -156,7 +164,7 @@ export function GroupSelectionBox3D() {
   ]
 
   return (
-    <group position={position}>
+    <group position={position} quaternion={box.quaternion}>
       <primitive object={edges} />
       {/* Invisible whole-volume hit target — the box IS the drag handle. */}
       <mesh

package/src/components/editor/group-transform-shared.test.ts

@@ -1,9 +1,24 @@
 import { beforeAll, describe, expect, test } from 'bun:test'
-import { type AnyNode, type AnyNodeDefinition, nodeRegistry, registerNode } from '@pascal-app/core'
+import {
+  type AnyNode,
+  type AnyNodeDefinition,
+  type AnyNodeId,
+  CeilingNode,
+  LevelNode,
+  nodeRegistry,
+  registerNode,
+  SlabNode,
+  sceneRegistry,
+  useScene,
+  WallNode,
+} from '@pascal-app/core'
+import { BoxGeometry, Group, Mesh } from 'three'
 import { z } from 'zod'
 import {
   classifyParticipant,
   collectParticipants,
+  computeGroupPlanBox,
+  groupPlanBounds,
   planBoundsCenter,
   rotateGroupPatches,
   rotateGroupSnapshots,
@@ -472,3 +487,113 @@ describe('group transform participants', () => {
     ])
   })
 })
+
+describe('group plan bounds', () => {
+  const withNodes = (nodes: AnyNode[], run: () => void) => {
+    const saved = useScene.getState().nodes
+    useScene.setState({ nodes: Object.fromEntries(nodes.map((n) => [n.id, n])) as typeof saved })
+    try {
+      run()
+    } finally {
+      useScene.setState({ nodes: saved })
+    }
+  }
+
+  test('a placed object measures its built mesh in the level frame, or falls back to its anchor', () => {
+    const level = new Group()
+    level.position.set(10, 0, -4)
+    level.rotation.y = Math.PI / 5
+    const item = new Mesh(new BoxGeometry(1, 1, 1))
+    item.position.set(2, 0.5, 0)
+    level.add(item)
+    level.updateWorldMatrix(true, true)
+    const registry = sceneRegistry.nodes as unknown as Map<string, unknown>
+    registry.set('item_plan_bounds_test', item)
+    const start = {
+      id: 'item_plan_bounds_test' as AnyNodeId,
+      kind: 'vec3' as const,
+      position: [2, 0, 0] as [number, number, number],
+      rotation: [0, 0, 0] as [number, number, number],
+    }
+    try {
+      const frameInv = level.matrixWorld.clone().invert()
+      const built = groupPlanBounds([start], frameInv)
+      expect(built?.minX).toBeCloseTo(1.5)
+      expect(built?.maxX).toBeCloseTo(2.5)
+      expect(built?.minZ).toBeCloseTo(-0.5)
+      expect(built?.maxZ).toBeCloseTo(0.5)
+      // Unbuilt while the 3D scene is paused: the placeholder must not count.
+      item.geometry.userData.placeholder = true
+      expect(groupPlanBounds([start], frameInv)).toEqual({ minX: 2, minZ: 0, maxX: 2, maxZ: 0 })
+    } finally {
+      registry.delete('item_plan_bounds_test')
+    }
+  })
+
+  test('hugs the selected wall outlines; a connected wall stays outside', () => {
+    const level = LevelNode.parse({ children: [] })
+    const bottom = WallNode.parse({
+      parentId: level.id,
+      start: [0, 0],
+      end: [2.4, 0],
+      thickness: 0.2,
+    })
+    const side = WallNode.parse({
+      parentId: level.id,
+      start: [2.4, 0],
+      end: [2.4, 5.3],
+      thickness: 0.2,
+    })
+    const neighbour = WallNode.parse({
+      parentId: level.id,
+      start: [2.4, 5.3],
+      end: [8, 5.3],
+      thickness: 0.2,
+    })
+    withNodes([level, bottom, side, neighbour], () => {
+      const plan = computeGroupPlanBox([bottom.id, side.id], level.id)
+      expect(plan?.minX).toBeCloseTo(0)
+      expect(plan?.maxX).toBeCloseTo(2.5)
+      expect(plan?.minZ).toBeCloseTo(-0.1)
+      expect(plan?.maxZ).toBeLessThan(5.5)
+      expect(plan?.maxX).toBeLessThan(8)
+    })
+  })
+
+  test('two walls with the room floor and ceiling: the box is the drawn outlines, never the meshes', () => {
+    // A user's selection whose box came out 13 m wide in 2D-only view.
+    const level = LevelNode.parse({ id: 'level_vvkg048zziz9ktiy', children: [] })
+    const room: [number, number][] = [
+      [-3.6221682640435353, -9.037533979512114],
+      [-6.21504662384804, -8.29671159099654],
+      [-5.712152486161543, -6.5365821090938],
+      [-5.712152486161543, -5],
+      [-8.223564365687542, -5],
+      [-8.223564365687542, -6.5365821090938],
+      [-10.712152486161543, -6.5365821090938],
+      [-11.712152486161543, -8.5365821090938],
+      [-4.119274126357038, -10.777404497609373],
+    ]
+    const wall15 = WallNode.parse({
+      parentId: level.id,
+      start: [-10.712152486161543, -6.5365821090938],
+      end: [-11.712152486161543, -8.5365821090938],
+    })
+    const wall12 = WallNode.parse({
+      parentId: level.id,
+      start: [-11.712152486161543, -8.5365821090938],
+      end: [-6.712152486161543, -10.0365821090938],
+    })
+    const slab = SlabNode.parse({ parentId: level.id, polygon: room, elevation: 0.05 })
+    const ceiling = CeilingNode.parse({ parentId: level.id, polygon: room, height: 2.49 })
+    withNodes([level, wall15, wall12, slab, ceiling], () => {
+      const plan = computeGroupPlanBox([wall15.id, ceiling.id, slab.id, wall12.id], level.id)!
+      expect(plan.minX).toBeLessThan(-11.71)
+      expect(plan.minX).toBeGreaterThan(-11.95)
+      expect(plan.maxX).toBeCloseTo(-3.62, 1)
+      expect(plan.minZ).toBeCloseTo(-10.78, 1)
+      expect(plan.maxZ).toBeCloseTo(-5, 1)
+      expect(plan.maxX - plan.minX).toBeLessThan(8.4)
+    })
+  })
+})