@pascal-app/editor 1.0.3 → 1.0.4

package/src/components/editor/footprint-height-handle.tsx

@@ -0,0 +1,204 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  getStoredLevelHeight,
+  type Point,
+  type SlabNode,
+  sceneRegistry,
+  upperFloorHeightControl,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
+import { type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
+import { useRef, useState } from 'react'
+import { type Group, Plane, Vector2, Vector3 } from 'three'
+import {
+  beginFootprintHeightPreview,
+  footprintHeightMinimum,
+  footprintHeightValue,
+  THICK_FLOOR_HINT,
+  thickFloorAdvice,
+} from '../../lib/floor-footprints'
+import { formatLinearMeasurement } from '../../lib/measurements'
+import { runRoomHandleDrag } from '../../lib/room-handle-drag'
+import useEditor, { isGridSnapActive } from '../../store/use-editor'
+import useInteractionScope from '../../store/use-interaction-scope'
+import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
+import { ElevationArrows, outlineCentroid, useHandleScale } from './room-handles'
+
+export const FOOTPRINT_HEIGHT_DRAG_LABEL = 'footprint-height'
+
+const PILL =
+  'pointer-events-none flex items-center gap-2 whitespace-nowrap rounded-full border border-border/60 bg-background/90 px-4 py-1.5 text-xs tabular-nums shadow-sm backdrop-blur'
+const NOTICE =
+  'pointer-events-none max-w-72 rounded-full border border-border/60 bg-background/95 px-3 py-1 text-center text-muted-foreground text-xs shadow-md backdrop-blur-md'
+
+/** The selected footprint floor (base plate), when it is the one selection in select mode. */
+function useSelectedFootprint(): SlabNode | null {
+  const selectedId = useViewer((s) =>
+    s.selection.selectedIds.length === 1 ? s.selection.selectedIds[0] : null,
+  )
+  const enabled = useEditor((s) => s.mode === 'select')
+  const idle = useInteractionScope(
+    (s) =>
+      s.scope.kind === 'idle' ||
+      (s.scope.kind === 'handle-drag' && s.scope.handle === FOOTPRINT_HEIGHT_DRAG_LABEL),
+  )
+  const plate = useScene((s) => {
+    const node = selectedId ? s.nodes[selectedId as AnyNodeId] : undefined
+    return node?.type === 'slab' && node.plateRole === 'base' ? node : null
+  })
+  return enabled && idle ? plate : null
+}
+
+/**
+ * A selected footprint floor's one control in 3D: the rooms' arrow–cube–arrow
+ * at the middle of the footprint, dragging its height above the ground. The
+ * building follows live; the release lands as one undo step. Refused heights
+ * (core's conflict, e.g. an upper floor over another footprint) show beside it.
+ */
+export function FootprintHeightHandle() {
+  const plate = useSelectedFootprint()
+  const root = useRef<Group>(null)
+  useFrame(() => {
+    const level = plate?.parentId ? sceneRegistry.nodes.get(plate.parentId) : null
+    if (!root.current) return
+    root.current.visible = !!level
+    if (level) {
+      level.updateWorldMatrix(true, false)
+      root.current.matrix.copy(level.matrixWorld)
+    }
+  })
+  if (!plate) return null
+  return (
+    <group matrixAutoUpdate={false} ref={root}>
+      <FootprintHeightArrows plate={plate} />
+    </group>
+  )
+}
+
+function FootprintHeightArrows({ plate }: { plate: SlabNode }) {
+  const { camera, raycaster, gl } = useThree()
+  const zoom = useHandleScale()
+  const unit = useViewer((s) => s.unit)
+  const metricNotation = useViewer((s) => s.metricNotation)
+  const [hover, setHover] = useState(false)
+  const [dragValue, setDragValue] = useState<number | null>(null)
+  const [notice, setNotice] = useState<string | null>(null)
+  const [hint, setHint] = useState<string | null>(null)
+  const upper = useScene((s) => upperFloorHeightControl(s.nodes, plate) !== null)
+  const anchor: Point = outlineCentroid([plate.polygon as Point[], ...(plate.holes as Point[][])])
+  const elevation = plate.elevation
+
+  const onPointerDown = (event: ThreeEvent<PointerEvent>) => {
+    if (event.button !== 0) return
+    event.stopPropagation()
+    suppressBoxSelectForPointer(event)
+    const levelId = plate.parentId
+    const level = levelId ? sceneRegistry.nodes.get(levelId) : null
+    if (!(levelId && level)) return
+    level.updateWorldMatrix(true, false)
+    const toLocal = level.matrixWorld.clone().invert()
+    const world = new Vector3(anchor[0], elevation, anchor[1]).applyMatrix4(level.matrixWorld)
+    const normal = camera.getWorldPosition(new Vector3()).sub(world).setY(0)
+    if (normal.lengthSq() === 0) return
+    const plane = new Plane().setFromNormalAndCoplanarPoint(normal.normalize(), world)
+    const localY = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      raycaster.setFromCamera(
+        new Vector2(
+          ((clientX - rect.left) / rect.width) * 2 - 1,
+          -((clientY - rect.top) / rect.height) * 2 + 1,
+        ),
+        camera,
+      )
+      const hit = raycaster.ray.intersectPlane(plane, new Vector3())
+      return hit ? hit.applyMatrix4(toLocal).y : null
+    }
+    const startY = localY(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    if (startY === null) return
+    const nodes = () => useScene.getState().nodes
+    // Heights are read against the plate as the drag found it (the preview moves it).
+    const startNodes = nodes()
+    const start = footprintHeightValue(startNodes, plate)
+    const min = footprintHeightMinimum(startNodes, plate)
+    const levelNode = nodes()[levelId as AnyNodeId]
+    const max = levelNode?.type === 'level' ? getStoredLevelHeight(levelNode) - 0.5 : 3
+    const step = isGridSnapActive() ? 0.05 : 0.01
+    let value = start
+    const preview = beginFootprintHeightPreview(plate.id)
+    setNotice(null)
+    setDragValue(start)
+    runRoomHandleDrag({
+      label: FOOTPRINT_HEIGHT_DRAG_LABEL,
+      nodeId: plate.id,
+      levelId,
+      requires: [plate.id],
+      sample: (x, y) => {
+        const pointerY = localY(x, y)
+        if (pointerY === null) return null
+        const raw = start + pointerY - startY
+        return Math.max(min, Math.min(max, Math.round(raw / step) * step))
+      },
+      onValue: (next) => {
+        if (Math.abs(next - value) < 1e-6) return
+        // Live: the building follows, outside history until the release.
+        const refused = preview.preview(next)
+        setNotice(refused)
+        setHint(thickFloorAdvice(startNodes, plate, next) ? THICK_FLOOR_HINT : null)
+        if (!refused) value = next
+        setDragValue(next)
+      },
+      onCommit: () => {
+        setNotice(preview.commit(value))
+        setDragValue(null)
+        setHint(null)
+      },
+      onCancel: () => {
+        preview.cancel()
+        setDragValue(null)
+        setHint(null)
+      },
+    })
+  }
+
+  const shown = dragValue ?? null
+  return (
+    <group>
+      <ElevationArrows
+        anchor={[anchor[0], elevation, anchor[1]]}
+        hover={hover || shown !== null}
+        onHoverChange={setHover}
+        onPointerDown={onPointerDown}
+        zoom={zoom}
+      />
+      {(shown !== null || notice || hint) && (
+        <Html
+          center
+          position={[anchor[0], elevation + 0.75 * zoom, anchor[1]]}
+          zIndexRange={[25, 0]}
+        >
+          <div className="flex flex-col items-center gap-1" data-footprint-height-pill>
+            {shown !== null && (
+              <div className={PILL}>
+                <span className="font-medium text-foreground">
+                  {upper ? 'Floor top' : 'Foundation'}
+                </span>
+                <span className="text-muted-foreground">
+                  {formatLinearMeasurement(shown, unit, metricNotation)}
+                </span>
+              </div>
+            )}
+            {(notice ?? hint) && (
+              <div className={NOTICE} data-footprint-height-notice role="status">
+                {notice ?? hint}
+              </div>
+            )}
+          </div>
+        </Html>
+      )}
+    </group>
+  )
+}

package/src/components/editor/group-actions.ts

@@ -18,10 +18,13 @@ import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import { Plane, Vector2, Vector3 } from 'three'
 import { GROUP_MOVE_DRAG_LABEL } from '../../lib/contextual-help'
 import { clientToPlan } from '../../lib/floorplan/plan-coords'
+import { deleteSelectedSeparator, requestRoomDeletion } from '../../lib/room-structure-commands'
+import { captureElementActionOrigin, completeElementAction } from '../../lib/room-zone-routing'
 import {
   copySelectedNodesToEditorClipboard,
   duplicateNodesToLevel,
   getEditorClipboardSnapshot,
+  type PasteRefusal,
   pasteSystemEditorClipboardToLevel,
 } from '../../lib/scene-clipboard'
 import { emitDeleteSFX, sfxEmitter } from '../../lib/sfx-bus'
@@ -33,6 +36,7 @@ import useEditor, {
   isGridSnapActive,
   isMagneticSnapActive,
 } from '../../store/use-editor'
+import useFloorplanMode from '../../store/use-floorplan-mode'
 import useInteractionScope from '../../store/use-interaction-scope'
 import { useFloorplanGroupDrag } from '../editor-2d/floorplan-group-move'
 import {
@@ -456,12 +460,39 @@ function removeUnusedPasteMaterials(materialIds: SceneMaterialId[]) {
   }
 }
 
+const REFUSED_PASTE_REASONS: Record<PasteRefusal, [one: string, many: string]> = {
+  'no-access': [
+    'you no longer have access to the project it came from.',
+    'you no longer have access to the project they came from.',
+  ],
+  'no-copies': [
+    'this version is not available to copy from the source project.',
+    'these versions are not available to copy from the source project.',
+  ],
+  failed: ["it couldn't be copied. Try again.", "they couldn't be copied. Try again."],
+}
+
+/** Why scripted objects were left out of a paste, or of a build loaded from a file. */
+export function refusedObjectsNotice(
+  count: number,
+  refusal: PasteRefusal,
+  action: 'pasted' | 'loaded' = 'pasted',
+) {
+  const [one, many] = REFUSED_PASTE_REASONS[refusal]
+  return count === 1
+    ? `1 object wasn't ${action}: ${one}`
+    : `${count} objects weren't ${action}: ${many}`
+}
+
+let pastePending = false
+
 /**
  * Paste the Pascal scene payload from the browser clipboard onto the active
  * level, then carry the clones under the cursor until click-to-place. Escape
  * removes the uncommitted clones and any scene materials imported with them.
  */
 export async function pasteSelectionAndPickUp(targetLevelId?: AnyNodeId): Promise<boolean> {
+  if (pastePending) return false
   const activeScope = useInteractionScope.getState().scope
   if (activeScope.kind === 'placing' || activeScope.kind === 'moving') {
     emitter.emit('tool:cancel')
@@ -476,7 +507,18 @@ export async function pasteSelectionAndPickUp(targetLevelId?: AnyNodeId): Promis
   // above there is nothing to abandon.
   if (isBrushMode(useEditor.getState().mode)) useEditor.getState().setMode('select')
 
-  const result = await pasteSystemEditorClipboardToLevel(targetLevelId)
+  pastePending = true
+  let result: Awaited<ReturnType<typeof pasteSystemEditorClipboardToLevel>>
+  try {
+    result = await pasteSystemEditorClipboardToLevel(targetLevelId)
+  } finally {
+    pastePending = false
+  }
+  if (result?.refusal) {
+    useFloorplanMode
+      .getState()
+      .showNotice(refusedObjectsNotice(result.refusedIds.length, result.refusal))
+  }
   if (!result || result.pastedIds.length === 0) return false
 
   const discardPaste = () => {
@@ -547,7 +589,16 @@ export function cutSelectionToEditorClipboard(): boolean {
  */
 export function deleteSelection(): boolean {
   const selectedIds = useViewer.getState().selection.selectedIds as AnyNodeId[]
-  if (selectedIds.length === 0) return false
+  if (selectedIds.length === 0) {
+    const room = useEditor.getState().room
+    if (!room) return false
+    requestRoomDeletion(room.zoneId)
+    return true
+  }
+  // A drilled piece of a room (a wall, a separator, its ceiling) deleted: back to the room.
+  const origin = captureElementActionOrigin(selectedIds)
+  if (selectedIds.length === 1 && useScene.getState().nodes[selectedIds[0]!]?.type === 'separator')
+    return deleteSelectedSeparator(selectedIds[0]!, origin)
 
   const commitDelete = () => {
     const detail =
@@ -562,6 +613,7 @@ export function deleteSelection(): boolean {
     }
     useScene.getState().deleteNodes(selectedIds)
     useViewer.getState().setSelection({ selectedIds: [] })
+    completeElementAction(origin)
   }
 
   if (selectedIds.length >= BULK_DELETE_THRESHOLD) {

package/src/components/editor/handles/handle-hit-priority.test.tsx

@@ -0,0 +1,63 @@
+import { expect, test } from 'bun:test'
+import { type RootState, useThree } from '@react-three/fiber'
+import { create } from '@react-three/test-renderer'
+import { useLayoutEffect } from 'react'
+import { type Intersection, Object3D } from 'three'
+import { EDITOR_HANDLE_HIT_AREA_USER_DATA_KEY } from '../../../lib/direct-manipulation'
+import { EditorHandleHitPriority, prioritizeEditorHandleHits } from './handle-hit-priority'
+
+function hit(name: string, distance: number, handle = false): Intersection {
+  const object = new Object3D()
+  object.name = name
+  if (handle) object.userData[EDITOR_HANDLE_HIT_AREA_USER_DATA_KEY] = true
+  return { object, distance, point: undefined as never }
+}
+const names = (hits: Intersection[]) => hits.map((entry) => entry.object.name)
+
+test('a handle behind a wall comes first, so the hover goes where the press goes', () => {
+  const hits = [hit('wall', 3), hit('floor', 5), hit('up', 6, true), hit('cube', 6.2, true)]
+  expect(names(prioritizeEditorHandleHits(hits))).toEqual(['up', 'cube', 'wall', 'floor'])
+})
+
+test('without a handle on the ray the order is untouched', () => {
+  const hits = [hit('wall', 3), hit('floor', 5)]
+  expect(prioritizeEditorHandleHits(hits)).toBe(hits)
+})
+
+test('mounted, it is the canvas event filter; unmounted, the previous one comes back', async () => {
+  let state: RootState | null = null
+  const Probe = () => {
+    state = useThree((root) => root)
+    return null
+  }
+  const previous = (hits: Intersection[]) => hits.filter((entry) => entry.object.name !== 'grid')
+  const Previous = () => {
+    const setEvents = useThree((root) => root.setEvents)
+    useLayoutEffect(() => setEvents({ filter: previous }), [setEvents])
+    return null
+  }
+  const before = await create(
+    <>
+      <Probe />
+      <Previous />
+    </>,
+  )
+  await before.update(
+    <>
+      <Probe />
+      <Previous />
+      <EditorHandleHitPriority />
+    </>,
+  )
+  const hits = [hit('grid', 1), hit('wall', 3), hit('cube', 6, true)]
+  const filter = (state as RootState | null)?.events.filter
+  expect(names(filter!(hits, state!))).toEqual(['cube', 'wall'])
+  await before.update(
+    <>
+      <Probe />
+      <Previous />
+    </>,
+  )
+  expect((state as RootState | null)?.events.filter).toBe(previous)
+  await before.unmount()
+})

package/src/components/editor/handles/handle-hit-priority.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { useThree } from '@react-three/fiber'
+import { useEffect } from 'react'
+import type { Intersection, Object3D } from 'three'
+import { EDITOR_HANDLE_HIT_AREA_USER_DATA_KEY } from '../../../lib/direct-manipulation'
+
+const isHandleHit = (hit: { object: Object3D }) =>
+  hit.object.userData?.[EDITOR_HANDLE_HIT_AREA_USER_DATA_KEY] === true
+
+/**
+ * Editor handles first, everything else after, each in distance order. Handles
+ * draw on top of walls and a handle anywhere along the ray already owns the
+ * press; ordering them first gives them the hover too. Distance order alone
+ * lets a wall in front win the hover for good: once its enter stops
+ * propagation, R3F keeps stopping every later move at it, so a handle behind
+ * it never hears its enter however the pointer reaches it.
+ */
+export function prioritizeEditorHandleHits<T extends { object: Object3D }>(hits: T[]): T[] {
+  if (!hits.some(isHandleHit)) return hits
+  return [...hits.filter(isHandleHit), ...hits.filter((hit) => !isHandleHit(hit))]
+}
+
+/** Installs `prioritizeEditorHandleHits` as the canvas's pointer-event filter while mounted. */
+export function EditorHandleHitPriority() {
+  const get = useThree((state) => state.get)
+  const setEvents = useThree((state) => state.setEvents)
+  useEffect(() => {
+    const previous = get().events.filter
+    setEvents({
+      filter: (hits: Intersection[], state) =>
+        prioritizeEditorHandleHits(previous ? previous(hits, state) : hits),
+    })
+    return () => setEvents({ filter: previous })
+  }, [get, setEvents])
+  return null
+}

package/src/components/editor/handles/swallow-next-click.test.ts

@@ -0,0 +1,28 @@
+import { expect, spyOn, test } from 'bun:test'
+import { swallowNextClick } from './use-handle-drag'
+
+test('deferred click cleanup removes the listener from its original window', () => {
+  const originalWindow = Object.getOwnPropertyDescriptor(globalThis, 'window')
+  const target = new EventTarget()
+  const remove = spyOn(target, 'removeEventListener')
+  let cleanup: (() => void) | undefined
+  const timer = spyOn(globalThis, 'setTimeout').mockImplementation(((
+    callback: Parameters<typeof setTimeout>[0],
+  ) => {
+    cleanup = callback as () => void
+    return undefined as unknown as ReturnType<typeof setTimeout>
+  }) as typeof setTimeout)
+  try {
+    Object.defineProperty(globalThis, 'window', { configurable: true, value: target })
+    swallowNextClick()
+    Reflect.deleteProperty(globalThis, 'window')
+    expect(cleanup).toBeDefined()
+    expect(() => cleanup?.()).not.toThrow()
+    expect(remove).toHaveBeenCalledTimes(1)
+  } finally {
+    timer.mockRestore()
+    remove.mockRestore()
+    if (originalWindow) Object.defineProperty(globalThis, 'window', originalWindow)
+    else Reflect.deleteProperty(globalThis, 'window')
+  }
+})