@pascal-app/editor 0.9.1 → 1.0.0-beta.1

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

@@ -0,0 +1,130 @@
+'use client'
+
+import { type AnyNodeId, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
+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 useEditor from '../../store/use-editor'
+import useInteractionScope, { useMovingNode } from '../../store/use-interaction-scope'
+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.
+ */
+export function GroupFloatingActionMenu() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const levelId = useViewer((s) => s.selection.levelId)
+  const mode = useEditor((s) => s.mode)
+  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 scope = useInteractionScope((s) => s.scope)
+  const menuStepBack = resolveOverlayPolicy(scope).conflictingControls === 'hidden'
+
+  const groupRef = useRef<THREE.Group>(null)
+  const menuScaleRef = useRef<HTMLDivElement>(null)
+
+  const participantIds = useMemo(
+    () =>
+      selectedIds.length > 1
+        ? selectedIds.filter(
+            (id) => classifyParticipant(nodes[id as AnyNodeId], levelId, nodes) !== null,
+          )
+        : [],
+    [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 meshEpoch = useMeshSettleEpoch(nodes)
+  const anchor = useMemo(() => {
+    void meshEpoch
+    if (participantIds.length === 0) return null
+    const fullIds = expandToComponent(participantIds, nodes, levelId)
+    const box = computeGroupBox(fullIds)
+    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])
+
+  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
+        ? state.camera.zoom / REF_ORTHO_ZOOM
+        : REF_CAMERA_DISTANCE /
+          Math.max(state.camera.position.distanceTo(groupRef.current.position), 0.001)
+    const scale = Math.min(MAX_MENU_SCALE, Math.max(MIN_MENU_SCALE, raw))
+    menuScaleRef.current.style.transform = `scale(${scale})`
+  })
+
+  const stopPointer = useCallback((event: React.PointerEvent) => {
+    event.stopPropagation()
+  }, [])
+  const handleMove = useCallback((event: React.MouseEvent) => {
+    event.stopPropagation()
+    startGroupPickUp()
+  }, [])
+  const handleDuplicate = useCallback((event: React.MouseEvent) => {
+    event.stopPropagation()
+    duplicateSelectionAndPickUp()
+  }, [])
+  const handleDelete = useCallback((event: React.MouseEvent) => {
+    event.stopPropagation()
+    deleteSelection()
+  }, [])
+
+  if (!anchor || mode === 'delete' || isFloorplanHovered || movingNode || menuStepBack) {
+    return null
+  }
+
+  return (
+    <group position={anchor} ref={groupRef}>
+      <Html
+        center
+        style={{
+          pointerEvents: 'auto',
+          touchAction: 'none',
+        }}
+        zIndexRange={[25, 0]}
+      >
+        <div className="relative" ref={menuScaleRef} style={{ transformOrigin: 'center center' }}>
+          <NodeActionMenu
+            onDelete={handleDelete}
+            onDuplicate={handleDuplicate}
+            onMove={handleMove}
+            onPointerDown={stopPointer}
+            onPointerUp={stopPointer}
+          />
+        </div>
+      </Html>
+    </group>
+  )
+}

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

@@ -0,0 +1,397 @@
+import {
+  type AnyNode,
+  type AnyNodeId,
+  bboxCornerAnchors,
+  collectAlignmentAnchors,
+  pauseSceneHistory,
+  pauseSpaceDetection,
+  resolveAlignment,
+  resumeSceneHistory,
+  resumeSpaceDetection,
+  useLiveNodeOverrides,
+  useLiveTransforms,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { type Camera, Plane, type Raycaster, Vector2, Vector3 } from 'three'
+import { GROUP_MOVE_DRAG_LABEL } from '../../lib/contextual-help'
+import { isHistoryShortcut } from '../../lib/history'
+import { sfxEmitter } from '../../lib/sfx-bus'
+import useAlignmentGuides from '../../store/use-alignment-guides'
+import useEditor, {
+  isAlignmentGuideActive,
+  isGridSnapActive,
+  isMagneticSnapActive,
+} from '../../store/use-editor'
+import useInteractionScope from '../../store/use-interaction-scope'
+import { useFloorplanGroupDrag } from '../editor-2d/floorplan-group-move'
+import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
+import { startGroupPickUp } from './group-actions'
+import {
+  classifyParticipant,
+  collectParticipants,
+  computeGroupBox,
+  expandToComponent,
+  levelFrame,
+  participantExtents,
+  rotateGroupSnapshots,
+  translateGroupPatches,
+  type Vec2,
+} from './group-transform-shared'
+import { swallowNextClick } from './handles/use-handle-drag'
+
+// 3D sibling of the 2D floorplan group move (and successor of the removed
+// group-move gizmo cross): pressing any selected element's body in a
+// multi-selection and dragging past the threshold slides the whole selection
+// on the ground plane; a plain click (no drag) enters the group pick-up,
+// parity with the single-item click-to-move. Shares the group participant
+// snapshot, welded junctions, snapping entry points, live override previews,
+// and single-undo commit with the 2D session.
+
+// Figma-style alignment-snap threshold (meters) — same pull distance as the
+// single-node registry move.
+const ALIGNMENT_THRESHOLD_M = 0.08
+const DRAG_THRESHOLD_PX = 4
+
+/**
+ * Arm a 3D group move from a pointer-down on `nodeId`. Returns false
+ * (attaching nothing) unless the node is a transformable member of a
+ * multi-selection.
+ */
+export function armGroupMove3d(args: {
+  nodeId: AnyNodeId
+  clientX: number
+  clientY: number
+  pointerId: number
+  nativeEvent: PointerEvent
+  camera: Camera
+  raycaster: Raycaster
+  domElement: HTMLCanvasElement
+}): boolean {
+  const { nodeId, clientX, clientY, pointerId, camera, raycaster, domElement } = args
+  const { selectedIds, levelId } = useViewer.getState().selection
+  if (selectedIds.length < 2 || !selectedIds.includes(nodeId)) return false
+  const sceneNodes = useScene.getState().nodes
+  if (classifyParticipant(sceneNodes[nodeId], levelId, sceneNodes) === null) return false
+
+  suppressBoxSelectForPointer(args.nativeEvent)
+
+  const ndc = new Vector2()
+  const setNDC = (x: number, y: number) => {
+    const rect = domElement.getBoundingClientRect()
+    ndc.set(((x - rect.left) / rect.width) * 2 - 1, -((y - rect.top) / rect.height) * 2 + 1)
+  }
+
+  type Session = {
+    starts: ReturnType<typeof collectParticipants>['starts']
+    links: ReturnType<typeof collectParticipants>['links']
+    affectedIds: AnyNodeId[]
+    candidates: ReturnType<typeof collectAlignmentAnchors>
+    restAnchors: ReturnType<typeof bboxCornerAnchors>
+    restCenter: Vec2
+    plane: Plane
+    startLocal: Vector3
+    frameInv: ReturnType<typeof levelFrame>['inverse']
+    lastDelta: Vec2 | null
+  }
+  let session: Session | null = null
+
+  const engage = (): Session | null => {
+    const nodes = useScene.getState().nodes
+    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)
+    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)
+    if (!restBox) return null
+    const plane = new Plane(new Vector3(0, 1, 0), -restBox.min.y)
+    const { inverse: frameInv } = levelFrame(levelId)
+
+    setNDC(clientX, clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hit = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hit)) return null
+    const startLocal = hit.clone().applyMatrix4(frameInv)
+
+    // Alignment candidates — anchors of everything OUTSIDE the moving set,
+    // gathered once at drag start. The group aligns as one rigid footprint:
+    // its bbox corners + center are the moving anchors.
+    const movingIdSet = new Set<string>(affectedIds)
+    const staticNodes: Record<string, AnyNode> = {}
+    for (const [nid, n] of Object.entries(nodes)) {
+      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 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),
+    )
+
+    for (const id of affectedIds) {
+      useLiveTransforms.getState().clear(id)
+    }
+
+    domElement.style.cursor = 'grabbing'
+    sfxEmitter.emit('sfx:item-pick')
+    swallowNextClick()
+    useViewer.getState().setInputDragging(true)
+    pauseSceneHistory(useScene)
+    useInteractionScope.getState().begin({
+      kind: 'handle-drag',
+      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]
+
+    return {
+      starts,
+      links,
+      affectedIds,
+      candidates,
+      restAnchors,
+      restCenter,
+      plane,
+      startLocal,
+      frameInv,
+      lastDelta: null,
+    }
+  }
+
+  const applyMove = (e: PointerEvent, s: Session) => {
+    setNDC(e.clientX, e.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const moveHit = new Vector3()
+    if (!raycaster.ray.intersectPlane(s.plane, moveHit)) return
+    const moveLocal = moveHit.applyMatrix4(s.frameInv)
+
+    // Snap the slide DELTA to the active grid step so the selection's internal
+    // layout stays intact. Mode-driven: the `handle-drag` scope resolves to
+    // the item snap context, so Shift cycles the mode mid-drag.
+    const step = useEditor.getState().gridSnapStep
+    const snap = isGridSnapActive() && step > 0
+    let dx = snap
+      ? Math.round((moveLocal.x - s.startLocal.x) / step) * step
+      : moveLocal.x - s.startLocal.x
+    let dz = snap
+      ? Math.round((moveLocal.z - s.startLocal.z) / step) * step
+      : moveLocal.z - s.startLocal.z
+
+    // Figma-style alignment layered on top: guides display in every mode
+    // except Off; the magnetic pull applies only in 'lines' mode.
+    if (isAlignmentGuideActive() && s.candidates.length > 0 && s.restAnchors.length > 0) {
+      const result = resolveAlignment({
+        moving: s.restAnchors.map((a) => ({ ...a, x: a.x + dx, z: a.z + dz })),
+        candidates: s.candidates,
+        threshold: ALIGNMENT_THRESHOLD_M,
+      })
+      if (result.snap && isMagneticSnapActive()) {
+        dx += result.snap.dx
+        dz += result.snap.dz
+      }
+      useAlignmentGuides.getState().set(result.guides)
+    } else {
+      useAlignmentGuides.getState().clear()
+    }
+
+    applyDelta(s, dx, dz)
+  }
+
+  const applyDelta = (s: Session, dx: number, dz: number) => {
+    // Ticker on each delta change — parity with the single-node move SFX.
+    if (!s.lastDelta || s.lastDelta[0] !== dx || s.lastDelta[1] !== dz) {
+      sfxEmitter.emit('sfx:grid-snap')
+      s.lastDelta = [dx, dz]
+    }
+
+    const entries = translateGroupPatches(s.starts, s.links, dx, dz)
+    const patchById = new Map(entries)
+    const liveTransforms = useLiveTransforms.getState()
+    for (const start of s.starts) {
+      if (start.kind === 'scalar') {
+        const patch = patchById.get(start.id)
+        if (patch) {
+          liveTransforms.set(start.id, {
+            position: patch.position as [number, number, number],
+            rotation: start.rotation,
+          })
+        }
+      }
+      useScene.getState().markDirty(start.id)
+    }
+    for (const l of s.links) {
+      useScene.getState().markDirty(l.id)
+    }
+    useLiveNodeOverrides.getState().setMany(entries)
+    // The 2D dashed group bbox rides the same delta in split view.
+    useFloorplanGroupDrag.getState().set([dx, dz])
+  }
+
+  // Mid-drag R/T: rotate the SNAPSHOTS around the rest pivot and re-apply the
+  // 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),
+    )
+    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)
+    }
+    sfxEmitter.emit('sfx:item-rotate')
+    applyDelta(s, s.lastDelta?.[0] ?? 0, s.lastDelta?.[1] ?? 0)
+  }
+
+  const clearLivePreviews = (s: Session) => {
+    const overrides = useLiveNodeOverrides.getState()
+    const liveTransforms = useLiveTransforms.getState()
+    for (const id of s.affectedIds) {
+      overrides.clear(id)
+      liveTransforms.clear(id)
+      useScene.getState().markDirty(id)
+    }
+  }
+
+  const removeListeners = () => {
+    window.removeEventListener('pointermove', onMove)
+    window.removeEventListener('pointerup', onUp, true)
+    window.removeEventListener('pointercancel', onPointerCancel)
+    window.removeEventListener('keydown', onKeyDown, true)
+  }
+
+  // History resume is NOT here — it pairs one-to-one with the
+  // `pauseSceneHistory` in `engage()`, on the commit and cancel paths.
+  const teardown = () => {
+    removeListeners()
+    if (domElement.style.cursor === 'grabbing') domElement.style.cursor = ''
+    useAlignmentGuides.getState().clear()
+    // Deferred so the canvas pointerup later in this same dispatch still sees
+    // the drag as active (see onUp).
+    setTimeout(() => useViewer.getState().setInputDragging(false), 0)
+    useInteractionScope
+      .getState()
+      .endIf((sc) => sc.kind === 'handle-drag' && sc.handle === GROUP_MOVE_DRAG_LABEL)
+    useFloorplanGroupDrag.getState().set(null)
+  }
+
+  const onMove = (e: PointerEvent) => {
+    if (e.pointerId !== pointerId) return
+    if (!session) {
+      if (Math.hypot(e.clientX - clientX, e.clientY - clientY) < DRAG_THRESHOLD_PX) return
+      session = engage()
+      if (!session) {
+        removeListeners()
+        return
+      }
+    }
+    applyMove(e, session)
+  }
+
+  // Registered in CAPTURE phase so this runs before the canvas handlers:
+  // `use-node-events` synthesizes a selection click on EVERY pointerup,
+  // suppressed only while `inputDragging` is set — so the gesture must keep
+  // it raised through this event's dispatch (released on a 0ms timer) or the
+  // release re-routes selection to whatever sits under the cursor. Plain
+  // stopPropagation would ALSO kill the window bubble listeners that clear
+  // the box-select pointer suppression, leaving the marquee dead.
+  const onUp = (e: PointerEvent) => {
+    if (e.pointerId !== pointerId) return
+    if (!session) {
+      // Plain click — enter the group pick-up, parity with the single-item
+      // click-to-move. Eat the click so the selection manager's click
+      // handling doesn't collapse the multi-selection underneath it.
+      removeListeners()
+      swallowNextClick()
+      useViewer.getState().setInputDragging(true)
+      setTimeout(() => useViewer.getState().setInputDragging(false), 0)
+      startGroupPickUp()
+      return
+    }
+    swallowNextClick()
+    sfxEmitter.emit('sfx:item-place')
+    const overrides = useLiveNodeOverrides.getState()
+    const updates: { id: AnyNodeId; data: Partial<AnyNode> }[] = []
+    for (const id of session.affectedIds) {
+      const patch = overrides.get(id)
+      if (patch) updates.push({ id, data: patch as Partial<AnyNode> })
+    }
+    // Resume before the commit so the single batched `updateNodes` is the one
+    // tracked set — collapsing the whole group move into one undo step.
+    // Group transforms move existing structure rigidly — the wall-driven room
+    // auto-detection must not re-create floors/ceilings for the walls' new
+    // positions (that belongs to wall building/editing). Paused around the
+    // commit; the sync rolls its baseline forward for paused changes.
+    pauseSpaceDetection()
+    resumeSceneHistory(useScene)
+    if (updates.length > 0) useScene.getState().updateNodes(updates)
+    resumeSpaceDetection()
+    clearLivePreviews(session)
+    session = null
+    teardown()
+  }
+
+  const cancel = () => {
+    if (session) {
+      clearLivePreviews(session)
+      resumeSceneHistory(useScene)
+      session = null
+    }
+    teardown()
+  }
+
+  const onPointerCancel = (e: PointerEvent) => {
+    if (e.pointerId !== pointerId) return
+    cancel()
+  }
+
+  // Capture phase so the drag's Escape / R / T win over the global
+  // `use-keyboard` arms, which would otherwise act on stale store state
+  // (or clear the multi-selection) mid-session.
+  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
+      e.preventDefault()
+      e.stopPropagation()
+      rotateSession(session, key === 'r' ? 1 : -1)
+      return
+    }
+    if (e.key === 'Delete' || e.key === 'Backspace') {
+      // Deleting mid-move: revert the session first, then let the global
+      // Delete arm remove the selection — no dangling carry.
+      cancel()
+      return
+    }
+    // ⌘Z mid-move cancels like Escape — never a history jump under a live pointer.
+    if (e.key !== 'Escape' && !isHistoryShortcut(e)) return
+    e.preventDefault()
+    e.stopPropagation()
+    swallowNextClick()
+    cancel()
+  }
+
+  window.addEventListener('pointermove', onMove)
+  window.addEventListener('pointerup', onUp, true)
+  window.addEventListener('pointercancel', onPointerCancel)
+  window.addEventListener('keydown', onKeyDown, true)
+  return true
+}