@pascal-app/editor 1.0.0-beta.4 → 1.0.0

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

@@ -7,28 +7,27 @@ import { useFrame } from '@react-three/fiber'
 import { useCallback, useMemo, useRef } from 'react'
 import * as THREE from 'three'
 import { resolveOverlayPolicy } from '../../lib/interaction/overlay-policy'
+import { canCreateSessionGroup, selectionIntersectsSessionGroup } from '../../lib/session-groups'
 import useEditor from '../../store/use-editor'
 import useInteractionScope, { useMovingNode } from '../../store/use-interaction-scope'
+import useSessionGroups, {
+  groupCurrentSelection,
+  ungroupCurrentSelection,
+} from '../../store/use-session-groups'
 import { deleteSelection, duplicateSelectionAndPickUp, startGroupPickUp } from './group-actions'
 import { classifyParticipant, computeGroupBox, expandToComponent } from './group-transform-shared'
 import { NodeActionMenu } from './node-action-menu'
 import { useMeshSettleEpoch } from './use-mesh-settle-epoch'
 
-// Matches the single-node FloatingActionMenu's zoom-compensation constants.
 const REF_ORTHO_ZOOM = 50
 const REF_CAMERA_DISTANCE = 12
 const MIN_MENU_SCALE = 0.6
 const MAX_MENU_SCALE = 1.4
-// Clearance above the group's bbox top so the pill doesn't sit on the meshes.
 const MENU_Y_OFFSET = 0.42
 
 /**
- * Floating Move / Duplicate / Delete pill for a MULTI-selection in the 3D
- * view — the group sibling of the single-node `FloatingActionMenu` (which is
- * sole-selection only). Anchored above the selection's bounding-box center;
- * every action targets the whole selection: Move picks the group up (it rides
- * the cursor until a click places it), Duplicate clones the selection and
- * picks the clones up, Delete removes everything selected.
+ * Floating pill for MULTI-selection in 3D: Move, Group, Ungroup, Duplicate, Delete.
+ * Group/Ungroup are session-only (Ctrl/Cmd+G / Ctrl/Cmd+Shift+G).
  */
 export function GroupFloatingActionMenu() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
@@ -37,8 +36,7 @@ export function GroupFloatingActionMenu() {
   const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered)
   const movingNode = useMovingNode()
   const nodes = useScene((s) => s.nodes)
-  // Hard-hidden during any active interaction (drag, pick-up, reshape) so the
-  // pill never competes with the live action — same policy as the 1-node menu.
+  const sessionGroups = useSessionGroups((s) => s.groups)
   const scope = useInteractionScope((s) => s.scope)
   const menuStepBack = resolveOverlayPolicy(scope).conflictingControls === 'hidden'
 
@@ -55,9 +53,18 @@ export function GroupFloatingActionMenu() {
     [selectedIds, levelId, nodes],
   )
 
-  // World anchor above the group bbox. Depends on the scene (post-commit
-  // positions), not the camera, and the menu hides during drags — so a
-  // memo keyed on selection + nodes is enough, no per-frame box traversal.
+  const liveIds = useMemo(() => new Set(Object.keys(nodes)), [nodes])
+  // Always offer Group when multi-select is not already exactly a session group.
+  const showGroup = useMemo(
+    () => canCreateSessionGroup(sessionGroups, selectedIds, liveIds),
+    [sessionGroups, selectedIds, liveIds],
+  )
+  // Ungroup when any selected member is in a session group.
+  const showUngroup = useMemo(
+    () => selectionIntersectsSessionGroup(sessionGroups, selectedIds, liveIds),
+    [sessionGroups, selectedIds, liveIds],
+  )
+
   const meshEpoch = useMeshSettleEpoch(nodes)
   const anchor = useMemo(() => {
     void meshEpoch
@@ -73,8 +80,6 @@ export function GroupFloatingActionMenu() {
   }, [participantIds, nodes, levelId, meshEpoch])
 
   useFrame((state) => {
-    // Scale the HTML pill with camera zoom / distance so it feels anchored to
-    // the world — mirrors the single-node menu.
     if (!(menuScaleRef.current && groupRef.current)) return
     const raw =
       state.camera instanceof THREE.OrthographicCamera
@@ -92,6 +97,14 @@ export function GroupFloatingActionMenu() {
     event.stopPropagation()
     startGroupPickUp()
   }, [])
+  const handleGroup = useCallback((event: React.MouseEvent) => {
+    event.stopPropagation()
+    groupCurrentSelection()
+  }, [])
+  const handleUngroup = useCallback((event: React.MouseEvent) => {
+    event.stopPropagation()
+    ungroupCurrentSelection()
+  }, [])
   const handleDuplicate = useCallback((event: React.MouseEvent) => {
     event.stopPropagation()
     duplicateSelectionAndPickUp()
@@ -119,9 +132,11 @@ export function GroupFloatingActionMenu() {
           <NodeActionMenu
             onDelete={handleDelete}
             onDuplicate={handleDuplicate}
+            onGroup={showGroup ? handleGroup : undefined}
             onMove={handleMove}
             onPointerDown={stopPointer}
             onPointerUp={stopPointer}
+            onUngroup={showUngroup ? handleUngroup : undefined}
           />
         </div>
       </Html>

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

@@ -32,9 +32,12 @@ import {
   collectParticipants,
   computeGroupBox,
   expandToComponent,
+  type GroupPlanBounds,
+  groupPlanBounds,
   levelFrame,
-  participantExtents,
+  planBoundsCenter,
   rotateGroupSnapshots,
+  rotatePlanBounds,
   translateGroupPatches,
   type Vec2,
 } from './group-transform-shared'
@@ -88,6 +91,9 @@ export function armGroupMove3d(args: {
     affectedIds: AnyNodeId[]
     candidates: ReturnType<typeof collectAlignmentAnchors>
     restAnchors: ReturnType<typeof bboxCornerAnchors>
+    startBounds: GroupPlanBounds
+    restBounds: GroupPlanBounds
+    rotation: number
     restCenter: Vec2
     plane: Plane
     startLocal: Vector3
@@ -130,14 +136,14 @@ export function armGroupMove3d(args: {
       if (n && !movingIdSet.has(nid)) staticNodes[nid] = n
     }
     const candidates = collectAlignmentAnchors(staticNodes, '', levelId)
-    const boxMin = restBox.min.clone().applyMatrix4(frameInv)
-    const boxMax = restBox.max.clone().applyMatrix4(frameInv)
+    const restBounds = groupPlanBounds(restBox, starts, frameInv)
+    if (!restBounds) return null
     const restAnchors = bboxCornerAnchors(
       'group-move',
-      Math.min(boxMin.x, boxMax.x),
-      Math.min(boxMin.z, boxMax.z),
-      Math.max(boxMin.x, boxMax.x),
-      Math.max(boxMin.z, boxMax.z),
+      restBounds.minX,
+      restBounds.minZ,
+      restBounds.maxX,
+      restBounds.maxZ,
     )
 
     for (const id of affectedIds) {
@@ -154,9 +160,11 @@ export function armGroupMove3d(args: {
       nodeId,
       handle: GROUP_MOVE_DRAG_LABEL,
     })
-    // Rotation pivot for mid-drag R/T — the participant DATA extents' center.
-    const ext = participantExtents(starts)
-    const restCenter: Vec2 = ext ? [(ext.minX + ext.maxX) / 2, (ext.minZ + ext.maxZ) / 2] : [0, 0]
+    // Rotation pivot for mid-drag R/T — the START footprint's center, the same
+    // point the idle keyboard rotate and the rotate gizmos orbit. Fixed for the
+    // whole session: the snapshots are start placements, and `applyDelta` adds
+    // the live drag delta on top of them.
+    const restCenter = planBoundsCenter(restBounds)
 
     return {
       starts,
@@ -164,6 +172,9 @@ export function armGroupMove3d(args: {
       affectedIds,
       candidates,
       restAnchors,
+      startBounds: restBounds,
+      restBounds,
+      rotation: 0,
       restCenter,
       plane,
       startLocal,
@@ -245,18 +256,22 @@ export function armGroupMove3d(args: {
   // current delta — the carried group turns exactly like the idle keyboard
   // rotate, and the commit stays a single updateNodes.
   const rotateSession = (s: Session, direction: 1 | -1) => {
-    const rotated = rotateGroupSnapshots(
-      s.starts,
-      s.links,
-      { x: s.restCenter[0], z: s.restCenter[1] },
-      -direction * (Math.PI / 4),
-    )
+    const pivot = { x: s.restCenter[0], z: s.restCenter[1] }
+    const delta = -direction * (Math.PI / 4)
+    const rotated = rotateGroupSnapshots(s.starts, s.links, pivot, delta)
     s.starts = rotated.starts
     s.links = rotated.links
-    const ext = participantExtents(rotated.starts)
-    if (ext) {
-      s.restAnchors = bboxCornerAnchors('group-move', ext.minX, ext.minZ, ext.maxX, ext.maxZ)
-    }
+    // Re-fit from the start footprint at the accumulated angle: rotating the
+    // previous axis-aligned fit would inflate the box every step.
+    s.rotation += delta
+    s.restBounds = rotatePlanBounds(s.startBounds, pivot, s.rotation)
+    s.restAnchors = bboxCornerAnchors(
+      'group-move',
+      s.restBounds.minX,
+      s.restBounds.minZ,
+      s.restBounds.maxX,
+      s.restBounds.maxZ,
+    )
     sfxEmitter.emit('sfx:item-rotate')
     applyDelta(s, s.lastDelta?.[0] ?? 0, s.lastDelta?.[1] ?? 0)
   }
@@ -369,7 +384,22 @@ export function armGroupMove3d(args: {
   const onKeyDown = (e: KeyboardEvent) => {
     const key = e.key.toLowerCase()
     if ((key === 'r' || key === 't') && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) {
-      if (!session) return
+      // Armed but still under the drag threshold: engage first (exactly what
+      // the next pointer-move would do) so the rotation lands inside this
+      // session. Falling through to the global idle arm instead would write
+      // the scene behind snapshots already captured here, and the first
+      // `applyDelta` would republish them — undoing the rotation.
+      if (!session) {
+        session = engage()
+        if (!session) {
+          // No plane hit yet: swallow the chord and keep the gesture armed so
+          // the next pointer-move can still engage; the idle arm must not run
+          // behind the snapshots captured here.
+          e.preventDefault()
+          e.stopPropagation()
+          return
+        }
+      }
       e.preventDefault()
       e.stopPropagation()
       rotateSession(session, key === 'r' ? 1 : -1)

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

@@ -4,7 +4,10 @@ import { z } from 'zod'
 import {
   classifyParticipant,
   collectParticipants,
+  planBoundsCenter,
   rotateGroupPatches,
+  rotateGroupSnapshots,
+  rotatePlanBounds,
   translateGroupPatches,
 } from './group-transform-shared'
 
@@ -40,6 +43,34 @@ function registerElevatorTestKind() {
   } as AnyNodeDefinition)
 }
 
+// A level holding one of each rigid placement shape: an item ([x,y,z] rotation)
+// and a column (numeric rotation).
+function placedNodes() {
+  return {
+    building_test: { id: 'building_test', type: 'building', children: ['level_test'] },
+    level_test: {
+      id: 'level_test',
+      type: 'level',
+      parentId: 'building_test',
+      children: ['item_chair', 'column_post'],
+    },
+    item_chair: {
+      id: 'item_chair',
+      type: 'item',
+      parentId: 'level_test',
+      position: [1, 0, 3],
+      rotation: [0, 0.5, 0],
+    },
+    column_post: {
+      id: 'column_post',
+      type: 'column',
+      parentId: 'level_test',
+      position: [4, 0, -1],
+      rotation: 1.25,
+    },
+  } as unknown as Record<string, AnyNode>
+}
+
 describe('group transform participants', () => {
   beforeAll(() => {
     registerBuildingScopedTestKind()
@@ -362,6 +393,53 @@ describe('group transform participants', () => {
     expect(lampPatch.position).toEqual([3, 2.4, 2])
   })
 
+  test('translate patches carry the snapshot rotation for vec3 and scalar kinds', () => {
+    const { starts } = collectParticipants(
+      ['item_chair', 'column_post'],
+      placedNodes(),
+      'level_test',
+    )
+    const patches = Object.fromEntries(translateGroupPatches(starts, [], 1, 2))
+
+    expect(patches.item_chair).toEqual({ position: [2, 0, 5], rotation: [0, 0.5, 0] })
+    expect(patches.column_post).toEqual({ position: [5, 0, 1], rotation: 1.25 })
+  })
+
+  test('a mid-drag rotation survives the next translate re-publish', () => {
+    const { starts } = collectParticipants(
+      ['item_chair', 'column_post'],
+      placedNodes(),
+      'level_test',
+    )
+    // What a mid-drag R does: turn the snapshots, then re-apply the live delta.
+    const rotated = rotateGroupSnapshots(starts, [], { x: 0, z: 0 }, Math.PI / 2)
+    const patches = Object.fromEntries(
+      translateGroupPatches(rotated.starts, rotated.links, 1, 2),
+    ) as Record<string, { position: number[]; rotation: number[] | number }>
+
+    // Orbited 90° in the atan2 x→z sense ((x, z) → (-z, x)), then slid.
+    expect(patches.item_chair!.position[0]).toBeCloseTo(-2)
+    expect(patches.item_chair!.position[2]).toBeCloseTo(3)
+    expect(patches.column_post!.position[0]).toBeCloseTo(2)
+    expect(patches.column_post!.position[2]).toBeCloseTo(6)
+    // …and the facings turned with it instead of reverting to the pre-drag yaw.
+    expect((patches.item_chair!.rotation as number[])[1]).toBeCloseTo(0.5 - Math.PI / 2)
+    expect(patches.column_post!.rotation as number).toBeCloseTo(1.25 - Math.PI / 2)
+  })
+
+  test('rotating the plan bounds keeps the footprint centred on the pivot', () => {
+    const bounds = { minX: 0, minZ: 0, maxX: 4, maxZ: 2 }
+    const [pivotX, pivotZ] = planBoundsCenter(bounds)
+    const rotated = rotatePlanBounds(bounds, { x: pivotX, z: pivotZ }, Math.PI / 2)
+
+    expect(rotated.minX).toBeCloseTo(1)
+    expect(rotated.maxX).toBeCloseTo(3)
+    expect(rotated.minZ).toBeCloseTo(-1)
+    expect(rotated.maxZ).toBeCloseTo(3)
+    expect(planBoundsCenter(rotated)[0]).toBeCloseTo(pivotX)
+    expect(planBoundsCenter(rotated)[1]).toBeCloseTo(pivotZ)
+  })
+
   test('supports legacy level-parented elevators already loaded in the editor', () => {
     const nodes = {
       building_test: {

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

@@ -387,12 +387,11 @@ export function rotateGroupSnapshots(
   return { starts: rotatedStarts, links: rotatedLinks }
 }
 
+export type GroupPlanBounds = { minX: number; minZ: number; maxX: number; maxZ: number }
+
 // Level-frame XZ extents of the participant DATA — the mesh-free sibling of
-// `computeGroupBox`, used when meshes aren't mounted yet and to re-seed
-// alignment anchors after a mid-drag rotation.
-export function participantExtents(
-  starts: ParticipantStart[],
-): { minX: number; minZ: number; maxX: number; maxZ: number } | null {
+// `computeGroupBox`, used when meshes aren't mounted yet.
+function participantExtents(starts: ParticipantStart[]): GroupPlanBounds | null {
   let minX = Number.POSITIVE_INFINITY
   let minZ = Number.POSITIVE_INFINITY
   let maxX = Number.NEGATIVE_INFINITY
@@ -419,8 +418,73 @@ export function participantExtents(
   return { minX, minZ, maxX, maxZ }
 }
 
+// The one footprint every group transform measures itself against: the
+// selection's mounted meshes (world box, converted into the level frame) with
+// the participant DATA extents as the fallback when the meshes aren't up yet
+// (Duplicate picks up its clones a frame before their renderers mount). Anchor
+// points alone sit metres inside a wide selection's real footprint, so a
+// gesture that pivots on the data extents orbits a different point than the
+// idle keyboard rotate and the rotate gizmos, which both use the mesh box.
+export function groupPlanBounds(
+  box: Box3 | null,
+  starts: ParticipantStart[],
+  frameInv: Matrix4,
+): GroupPlanBounds | null {
+  if (!box) return participantExtents(starts)
+  const min = box.min.clone().applyMatrix4(frameInv)
+  const max = box.max.clone().applyMatrix4(frameInv)
+  return {
+    minX: Math.min(min.x, max.x),
+    minZ: Math.min(min.z, max.z),
+    maxX: Math.max(min.x, max.x),
+    maxZ: Math.max(min.z, max.z),
+  }
+}
+
+export const planBoundsCenter = (b: GroupPlanBounds): Vec2 => [
+  (b.minX + b.maxX) / 2,
+  (b.minZ + b.maxZ) / 2,
+]
+
+// Re-seed the footprint after a mid-gesture rotation by orbiting the box
+// corners and re-fitting an axis-aligned box. Re-measuring the rotated DATA
+// extents instead would slide the centre off the pivot the snapshots turned
+// around, dragging the alignment anchors away from the group under the cursor.
+export function rotatePlanBounds(
+  b: GroupPlanBounds,
+  center: { x: number; z: number },
+  delta: number,
+): GroupPlanBounds {
+  const cos = Math.cos(delta)
+  const sin = Math.sin(delta)
+  let minX = Number.POSITIVE_INFINITY
+  let minZ = Number.POSITIVE_INFINITY
+  let maxX = Number.NEGATIVE_INFINITY
+  let maxZ = Number.NEGATIVE_INFINITY
+  const corners: Vec2[] = [
+    [b.minX, b.minZ],
+    [b.maxX, b.minZ],
+    [b.maxX, b.maxZ],
+    [b.minX, b.maxZ],
+  ]
+  for (const [x, z] of corners) {
+    const dx = x - center.x
+    const dz = z - center.z
+    const rx = center.x + dx * cos - dz * sin
+    const rz = center.z + dx * sin + dz * cos
+    minX = Math.min(minX, rx)
+    minZ = Math.min(minZ, rz)
+    maxX = Math.max(maxX, rx)
+    maxZ = Math.max(maxZ, rz)
+  }
+  return { minX, minZ, maxX, maxZ }
+}
+
 // Rigid group slide: shift every participant (and each linked neighbour's
-// shared endpoint) by the same level-frame XZ delta. Y and rotations untouched.
+// shared endpoint) by the same level-frame XZ delta. Y is untouched; the
+// snapshot's rotation rides along because a mid-gesture R/T turns the
+// SNAPSHOTS — dropping it here would republish (and commit) the pre-rotation
+// facing, orbiting the layout while every member keeps its old bearing.
 export function translateGroupPatches(
   starts: ParticipantStart[],
   links: LinkedNeighbor[],
@@ -437,7 +501,10 @@ export function translateGroupPatches(
       if (s.holes) patch.holes = s.holes.map((hole) => hole.map(shift))
       patches.push([s.id, patch])
     } else {
-      patches.push([s.id, { position: [s.position[0] + dx, s.position[1], s.position[2] + dz] }])
+      const position: Vec3 = [s.position[0] + dx, s.position[1], s.position[2] + dz]
+      const rotation =
+        s.kind === 'vec3' ? ([s.rotation[0], s.rotation[1], s.rotation[2]] as Vec3) : s.rotation
+      patches.push([s.id, { position, rotation }])
     }
   }
   for (const l of links) {

package/src/components/editor/handles/handle-arrow-raycast.test.ts

@@ -0,0 +1,86 @@
+import { expect, test } from 'bun:test'
+import { _roots, act, createRoot, extend } from '@react-three/fiber'
+import { createElement } from 'react'
+import { BoxGeometry, Mesh, MeshBasicMaterial, Raycaster, Vector3, type WebGLRenderer } from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import useEditor from '../../../store/use-editor'
+import { hitAreaRaycast, InvisibleHandleHitArea } from './handle-arrow'
+
+extend({ Mesh })
+
+test('an occluded handle does not sort ahead of a nearer scene body', () => {
+  const geometry = new BoxGeometry(0.5, 0.5, 0.5)
+  const material = new MeshBasicMaterial()
+  const body = new Mesh(geometry, material)
+  body.position.z = 1
+  body.updateMatrixWorld()
+  const handle = new Mesh(geometry, material)
+  handle.position.z = 2
+  handle.raycast = hitAreaRaycast
+  handle.updateMatrixWorld()
+
+  const raycaster = new Raycaster(new Vector3(0, 0, 0), new Vector3(0, 0, 1))
+  const hits = raycaster.intersectObjects([body, handle], false)
+
+  expect(hits[0]?.object).toBe(body)
+  expect(hits.find((hit) => hit.object === handle)?.distance).toBeGreaterThan(
+    hits.find((hit) => hit.object === body)?.distance ?? Number.POSITIVE_INFINITY,
+  )
+
+  geometry.dispose()
+  material.dispose()
+})
+
+test('mounted handles disable synchronously during placement drags and restore after release', async () => {
+  const previousDragMode = useEditor.getState().placementDragMode
+  const actGlobal = globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+  const previousAct = actGlobal.IS_REACT_ACT_ENVIRONMENT
+  actGlobal.IS_REACT_ACT_ENVIRONMENT = true
+  const canvas = new EventTarget() as HTMLCanvasElement
+  const root = createRoot(canvas)
+  const geometry = new BoxGeometry(1, 1, 1)
+  const material = new MeshBasicNodeMaterial()
+  try {
+    useEditor.setState({ placementDragMode: true })
+    await root.configure({
+      gl: { render() {}, setSize() {}, setPixelRatio() {} } as unknown as WebGLRenderer,
+      frameloop: 'never',
+      dpr: 1,
+      size: { width: 100, height: 100, top: 0, left: 0 },
+    })
+    const render = (scale: number) =>
+      createElement(InvisibleHandleHitArea, {
+        geometry,
+        material,
+        scale,
+        onPointerDown() {},
+        onPointerEnter() {},
+        onPointerLeave() {},
+      })
+    await act(async () => root.render(render(1)))
+    const scene = _roots.get(canvas)!.store.getState().scene
+    const handle = scene.children[0] as Mesh
+    scene.updateMatrixWorld(true)
+    const raycaster = new Raycaster(new Vector3(0, 0, 2), new Vector3(0, 0, -1))
+    raycaster.layers.enableAll()
+    expect(raycaster.intersectObject(handle)).toHaveLength(0)
+    useEditor.setState({ placementDragMode: false })
+    expect(handle.raycast).toBe(hitAreaRaycast)
+    expect(raycaster.intersectObject(handle).length).toBeGreaterThan(0)
+    useEditor.setState({ placementDragMode: true })
+    expect(raycaster.intersectObject(handle)).toHaveLength(0)
+    await act(async () => root.render(render(2)))
+    expect(raycaster.intersectObject(handle)).toHaveLength(0)
+    await act(async () => root.render(null))
+    const detachedRaycast = handle.raycast
+    useEditor.setState({ placementDragMode: false })
+    expect(handle.raycast).toBe(detachedRaycast)
+  } finally {
+    await act(async () => root.render(null))
+    _roots.delete(canvas)
+    geometry.dispose()
+    material.dispose()
+    useEditor.setState({ placementDragMode: previousDragMode })
+    actGlobal.IS_REACT_ACT_ENVIRONMENT = previousAct
+  }
+})