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

package/src/hooks/use-grid-events.test.ts

@@ -0,0 +1,240 @@
+import { expect, spyOn, test } from 'bun:test'
+import {
+  CeilingNode,
+  emitter,
+  type GridEvent,
+  nodeRegistry,
+  registerNode,
+  SlabNode,
+  useRegistry,
+  WallNode,
+} from '@pascal-app/core'
+import { hideFromScene, showInScene, useViewer } from '@pascal-app/viewer'
+import { _roots, act, createRoot } from '@react-three/fiber'
+import { createElement } from 'react'
+import {
+  DoubleSide,
+  Mesh,
+  MeshBasicMaterial,
+  PerspectiveCamera,
+  PlaneGeometry,
+  type WebGLRenderer,
+} from 'three'
+import { DRAFTING_SURFACE_EXTENSION_KEY } from '../lib/interaction/registered-drafting'
+import useInteractionScope from '../store/use-interaction-scope'
+import { useGridEvents } from './use-grid-events'
+
+test('grid moves throttle camera drags at 100 ms and resume immediately during tool drags', async () => {
+  const previousViewer = useViewer.getState()
+  const actGlobal = globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+  const previousAct = actGlobal.IS_REACT_ACT_ENVIRONMENT
+  actGlobal.IS_REACT_ACT_ENVIRONMENT = true
+  let now = 0
+  const clock = spyOn(performance, 'now').mockImplementation(() => now)
+  let rectReads = 0
+  const canvas = Object.assign(new EventTarget(), {
+    getBoundingClientRect() {
+      rectReads++
+      return { left: 0, top: 0, width: 100, height: 100 }
+    },
+  }) as unknown as HTMLCanvasElement
+  const root = createRoot(canvas)
+  const camera = new PerspectiveCamera(60, 1, 0.1, 100)
+  camera.position.set(0, 10, 10)
+  camera.lookAt(0, 0, 0)
+  camera.updateMatrixWorld()
+  const delivered: GridEvent[] = []
+  const onMove = (event: GridEvent) => delivered.push(event)
+  emitter.on('grid:move', onMove)
+
+  function Grid() {
+    useGridEvents(5)
+    return null
+  }
+
+  const send = (clientX = 50) => {
+    canvas.dispatchEvent(
+      Object.assign(new Event('pointermove'), { clientX, clientY: 50, button: 0 }),
+    )
+  }
+
+  try {
+    useViewer.setState({
+      cameraDragging: false,
+      inputDragging: false,
+      selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] },
+    })
+    await root.configure({
+      gl: {
+        domElement: canvas,
+        render() {},
+        setSize() {},
+        setPixelRatio() {},
+      } as unknown as WebGLRenderer,
+      camera,
+      frameloop: 'never',
+      dpr: 1,
+      size: { width: 100, height: 100, top: 0, left: 0 },
+    })
+    await act(async () => {
+      root.render(createElement(Grid))
+    })
+    send()
+    expect(rectReads).toBe(1)
+    expect(delivered).toHaveLength(1)
+    const initial = delivered[0]!
+    expect(initial.position[1]).toBeCloseTo(5)
+    expect(initial.localPosition).toEqual(initial.position)
+
+    for (const inputDragging of [false, true]) {
+      const before = delivered.length
+      useViewer.setState({ cameraDragging: true, inputDragging })
+      send(55)
+      expect(delivered).toHaveLength(before + 1)
+      for (now = 1; now < 100; now++) send(60)
+      expect(rectReads).toBe(before + 1)
+      expect(delivered).toHaveLength(before + 1)
+
+      now = 100
+      send(60)
+      expect(delivered).toHaveLength(before + 2)
+      expect(delivered.at(-1)!.position).not.toEqual(delivered.at(-2)!.position)
+      now = 101
+      useViewer.setState({ cameraDragging: false })
+      send()
+      expect(delivered).toHaveLength(before + 3)
+      expect(rectReads).toBe(delivered.length)
+      expect(delivered.at(-1)!.position).toEqual(initial.position)
+      expect(delivered.at(-1)!.localPosition).toEqual(initial.localPosition)
+      now = 0
+    }
+
+    await act(async () => {
+      root.render(null)
+    })
+    const before = delivered.length
+    send()
+    expect(delivered).toHaveLength(before)
+    expect(rectReads).toBe(before)
+  } finally {
+    await act(async () => {
+      root.render(null)
+    })
+    clock.mockRestore()
+    emitter.off('grid:move', onMove)
+    _roots.delete(canvas)
+    useViewer.setState(previousViewer)
+    actGlobal.IS_REACT_ACT_ENVIRONMENT = previousAct
+  }
+})
+
+test.each([
+  'slab',
+  'ceiling',
+] as const)('grid moves keep the same %s hit when its source joins or leaves a batch', async (kind) => {
+  const previousViewer = useViewer.getState()
+  const previousScope = useInteractionScope.getState().scope
+  const restoreRegistry = nodeRegistry._snapshot()
+  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 = Object.assign(new EventTarget(), {
+    getBoundingClientRect: () => ({ left: 0, top: 0, width: 100, height: 100 }),
+  }) as unknown as HTMLCanvasElement
+  const root = createRoot(canvas)
+  const camera = new PerspectiveCamera(60, 1, 0.1, 100)
+  camera.position.set(0, kind === 'ceiling' ? 1 : 10, 10)
+  camera.lookAt(0, 5, 0)
+  camera.updateMatrixWorld()
+  const surface = new Mesh(
+    new PlaneGeometry(20, 20).rotateX(-Math.PI / 2),
+    new MeshBasicMaterial({ side: DoubleSide }),
+  )
+  surface.position.y = 5
+  surface.updateMatrixWorld(true)
+  const surfaceId = `${kind}_grid_batch_test` as const
+  const wall = WallNode.parse({ start: [0, 0], end: [0, 2] })
+  const delivered: GridEvent[] = []
+  const onMove = (event: GridEvent) => delivered.push(event)
+  emitter.on('grid:move', onMove)
+
+  function Grid() {
+    useRegistry(surfaceId, kind, { current: surface })
+    useGridEvents(0)
+    return null
+  }
+  const send = () => {
+    const before = delivered.length
+    canvas.dispatchEvent(
+      Object.assign(new Event('pointermove'), { clientX: 55, clientY: 50, button: 0 }),
+    )
+    expect(delivered).toHaveLength(before + 1)
+    return delivered.at(-1)!
+  }
+
+  try {
+    nodeRegistry._reset()
+    registerNode({
+      kind,
+      schemaVersion: 1,
+      category: 'structure',
+      capabilities: {},
+      schema: kind === 'ceiling' ? CeilingNode : SlabNode,
+      defaults: () => ({}),
+      drafting: { surfaceQuery: true },
+      extensions: {
+        [DRAFTING_SURFACE_EXTENSION_KEY]: {
+          kind,
+          ...(kind === 'ceiling' ? { raycast: 'underside' } : {}),
+        },
+      },
+    })
+    useViewer.setState({
+      cameraDragging: false,
+      selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] },
+    })
+    await root.configure({
+      gl: {
+        domElement: canvas,
+        render() {},
+        setSize() {},
+        setPixelRatio() {},
+      } as unknown as WebGLRenderer,
+      camera,
+      frameloop: 'never',
+      dpr: 1,
+      size: { width: 100, height: 100, top: 0, left: 0 },
+    })
+    for (const scope of [
+      { kind: 'moving', node: wall, nodeId: wall.id, nodeType: 'wall', view: '3d' },
+      { kind: 'drafting', tool: kind },
+    ] as const) {
+      await act(async () => {
+        useInteractionScope.setState({ scope })
+        root.render(createElement(Grid))
+      })
+      const before = send()
+      expect(before.surfaceHit?.hostId).toBe(surfaceId)
+      expect(before.position[1]).toBeCloseTo(5)
+      hideFromScene(surface, 'batched')
+      const batched = send()
+      expect(batched.surfaceHit).toEqual(before.surfaceHit)
+      expect(batched.position).toEqual(before.position)
+      expect(batched.localPosition).toEqual(before.localPosition)
+      showInScene(surface, 'batched')
+      expect(send().position).toEqual(before.position)
+    }
+  } finally {
+    await act(async () => {
+      root.render(null)
+    })
+    emitter.off('grid:move', onMove)
+    _roots.delete(canvas)
+    surface.geometry.dispose()
+    surface.material.dispose()
+    restoreRegistry()
+    useInteractionScope.setState({ scope: previousScope })
+    useViewer.setState(previousViewer)
+    actGlobal.IS_REACT_ACT_ENVIRONMENT = previousAct
+  }
+})

package/src/hooks/use-grid-events.ts

@@ -3,14 +3,26 @@ import {
   type EventSuffix,
   emitter,
   type GridEvent,
+  nodeRegistry,
   sceneRegistry,
+  useScene,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { setSurfaceRaycastLayers, timeSpan, useViewer } from '@pascal-app/viewer'
 import { useThree } from '@react-three/fiber'
 import { useEffect, useRef } from 'react'
-import { Plane, Raycaster, Vector2, Vector3 } from 'three'
+import { Matrix3, type Object3D, Plane, Raycaster, Vector2, Vector3 } from 'three'
 import { getPlacementSurface } from '../lib/active-placement-surface'
+import { raycastCeilingUnderside } from '../lib/ceiling-surface-raycast'
 import { resolveTerrainGroundHit } from '../lib/ground-surface'
+import {
+  type DraftingSurfaceExtension,
+  registeredDraftingConfig,
+  registeredDraftingSurface,
+} from '../lib/interaction/registered-drafting'
+import useInteractionScope from '../store/use-interaction-scope'
+
+// Keep tool previews tracking camera navigation at 10 Hz without querying every move.
+const CAMERA_DRAG_MOVE_INTERVAL_MS = 100
 
 /**
  * Custom grid events hook that uses manual raycasting instead of mesh events.
@@ -18,11 +30,28 @@ import { resolveTerrainGroundHit } from '../lib/ground-surface'
  */
 export function useGridEvents(gridY: number) {
   const { camera, gl } = useThree()
+  const interactionScope = useInteractionScope((state) => state.scope)
+  const semanticSurfaceQueryRef = useRef(false)
+  semanticSurfaceQueryRef.current =
+    interactionScope.kind === 'placing' ||
+    interactionScope.kind === 'moving' ||
+    registeredDraftingConfig(interactionScope)?.surfaceQuery === true
   const raycaster = useRef(new Raycaster())
   const pointer = useRef(new Vector2())
   const groundPlane = useRef(new Plane(new Vector3(0, 1, 0), 0))
   const intersectionPoint = useRef(new Vector3())
 
+  type GridIntersection = {
+    point: Vector3
+    surface?: {
+      point: Vector3
+      object: Object3D
+      hostId: AnyNodeId
+      descriptor: DraftingSurfaceExtension
+      worldNormal?: Vector3
+    }
+  }
+
   // Update ground plane when grid Y changes
   useEffect(() => {
     groundPlane.current.constant = -gridY
@@ -30,8 +59,64 @@ export function useGridEvents(gridY: number) {
 
   useEffect(() => {
     const canvas = gl.domElement
+    setSurfaceRaycastLayers(raycaster.current.layers)
+
+    const getSurfaceIntersection = (): GridIntersection | null => {
+      let closest: GridIntersection | null = null
+      let closestDistance = Number.POSITIVE_INFINITY
+
+      for (const [type, definition] of nodeRegistry.entries()) {
+        const descriptor = registeredDraftingSurface(definition)
+        if (!descriptor) continue
+        for (const id of sceneRegistry.byType[type] ?? []) {
+          const root = sceneRegistry.nodes.get(id)
+          if (!root) continue
+          const scope = useInteractionScope.getState().scope
+          const surfaceDraft = registeredDraftingConfig(scope)?.surfaceQuery === true
+          if (surfaceDraft && useScene.getState().nodes[id as AnyNodeId]?.visible === false)
+            continue
+          if (surfaceDraft && !root.visible) continue
+          const intersections =
+            surfaceDraft && descriptor.raycast === 'underside'
+              ? raycastCeilingUnderside(raycaster.current, root)
+              : raycaster.current.intersectObject(root, true)
+          const hit = intersections.find((candidate) => {
+            if (!surfaceDraft) return true
+            if (useScene.getState().nodes[id as AnyNodeId]?.visible === false) return false
+            let object: Object3D | null = candidate.object
+            while (object) {
+              if (!object.visible || object.userData.wallHidden === true) return false
+              object = object.parent
+            }
+            return true
+          })
+          if (!hit || hit.distance >= closestDistance) continue
+          closestDistance = hit.distance
+          const worldNormal = hit.face
+            ? hit.face.normal
+                .clone()
+                .applyNormalMatrix(new Matrix3().getNormalMatrix(hit.object.matrixWorld))
+                .normalize()
+            : undefined
+          if (surfaceDraft && worldNormal && worldNormal.dot(raycaster.current.ray.direction) > 0)
+            worldNormal.negate()
+          closest = {
+            point: hit.point.clone(),
+            surface: {
+              point: hit.point.clone(),
+              object: hit.object,
+              hostId: id as AnyNodeId,
+              descriptor,
+              worldNormal,
+            },
+          }
+        }
+      }
+
+      return closest
+    }
 
-    const getIntersection = (nativeEvent: MouseEvent | PointerEvent): Vector3 | null => {
+    const getIntersection = (nativeEvent: MouseEvent | PointerEvent): GridIntersection | null => {
       // Convert mouse position to normalized device coordinates (-1 to +1)
       const rect = canvas.getBoundingClientRect()
       pointer.current.x = ((nativeEvent.clientX - rect.left) / rect.width) * 2 - 1
@@ -40,6 +125,33 @@ export function useGridEvents(gridY: number) {
       // Update raycaster
       raycaster.current.setFromCamera(pointer.current, camera)
 
+      // R3F node events can be stopped by another mesh, so this canvas-level
+      // raycast is the reliable architectural-surface source for placement and
+      // drawing tools. Keep it separate from the ordinary grid point so tools
+      // that intentionally place on the floor retain their existing behavior.
+      // Architectural meshes are expensive to raycast and are meaningful only
+      // to an active placement/drafting interaction. Floor tools retain the
+      // ordinary terrain/grid intersection without scanning every wall.
+      const surfaceHit = semanticSurfaceQueryRef.current ? getSurfaceIntersection() : null
+
+      // A semantic architectural hit is the authoritative cursor position.
+      // Do not replace it with the terrain/grid intersection below: that would
+      // make a wall hit carry wall metadata while still placing at the ground
+      // floor, especially in perspective views.
+      if (surfaceHit) return surfaceHit
+
+      const scope = useInteractionScope.getState().scope
+      const surfaceDraft = registeredDraftingConfig(scope)?.surfaceQuery === true
+      const workingSurface = getPlacementSurface()
+      if (surfaceDraft && workingSurface) {
+        const plane = new Plane().setFromNormalAndCoplanarPoint(
+          workingSurface.normal,
+          workingSurface.point,
+        )
+        const projected = raycaster.current.ray.intersectPlane(plane, intersectionPoint.current)
+        return { point: (projected ?? workingSurface.point).clone() }
+      }
+
       // Sculpted ground wins over the plane, but only while the plane IS the
       // ground (see `isSiteGroundPlane`): a plane riding a storey base or a slab
       // top is a real flat surface and must stay planar. The march is what removes
@@ -60,14 +172,18 @@ export function useGridEvents(gridY: number) {
             [direction.x, direction.y, direction.z],
             -groundPlane.current.constant,
           )
-      if (hit) return intersectionPoint.current.set(hit.x, hit.y, hit.z).clone()
+      if (hit) {
+        return {
+          point: intersectionPoint.current.set(hit.x, hit.y, hit.z).clone(),
+        }
+      }
 
       // Intersect with ground plane
       if (raycaster.current.ray.intersectPlane(groundPlane.current, intersectionPoint.current)) {
-        return intersectionPoint.current.clone()
+        return { point: intersectionPoint.current.clone() }
       }
 
-      return null
+      return surfaceHit
     }
 
     const emit = (suffix: EventSuffix, nativeEvent: MouseEvent | PointerEvent) => {
@@ -75,14 +191,69 @@ export function useGridEvents(gridY: number) {
       if (!point) return
 
       // Convert world-space point to building-local for tools that live inside a building.
-      const buildingId = useViewer.getState().selection.buildingId
+      const scope = useInteractionScope.getState().scope
+      const surfaceDraft = registeredDraftingConfig(scope)?.surfaceQuery === true
+      const buildingId = surfaceDraft
+        ? useViewer.getState().selection.levelId
+        : useViewer.getState().selection.buildingId
       const buildingMesh = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
-      const localPoint = buildingMesh ? buildingMesh.worldToLocal(point.clone()) : point
+      const localPoint = buildingMesh ? buildingMesh.worldToLocal(point.point.clone()) : point.point
+      const surfaceLocalPoint = point.surface
+        ? buildingMesh
+          ? buildingMesh.worldToLocal(point.surface.point.clone())
+          : point.surface.point.clone()
+        : undefined
+      const localNormal = point.surface?.worldNormal
+        ? buildingMesh
+          ? buildingMesh
+              .worldToLocal(point.surface.point.clone().add(point.surface.worldNormal))
+              .sub(surfaceLocalPoint ?? localPoint)
+              .normalize()
+          : point.surface.worldNormal
+        : undefined
+      const surfaceNode = point.surface
+        ? useScene.getState().nodes[point.surface.hostId]
+        : undefined
+      const classifiedFace =
+        point.surface && localNormal
+          ? point.surface.descriptor.classifyFace?.(surfaceNode, [
+              localNormal.x,
+              localNormal.y,
+              localNormal.z,
+            ])
+          : null
+      const { origin, direction } = raycaster.current.ray
+      const localRayOrigin = buildingMesh
+        ? buildingMesh.worldToLocal(origin.clone())
+        : origin.clone()
+      const localRayDirection = buildingMesh
+        ? buildingMesh.worldToLocal(origin.clone().add(direction)).sub(localRayOrigin).normalize()
+        : direction.clone()
 
       const eventKey = `grid:${suffix}` as `grid:${EventSuffix}`
       const payload: GridEvent = {
-        position: [point.x, point.y, point.z],
+        localFrameId: buildingId ?? undefined,
+        position: [point.point.x, point.point.y, point.point.z],
         localPosition: [localPoint.x, localPoint.y, localPoint.z],
+        localRay: {
+          origin: [localRayOrigin.x, localRayOrigin.y, localRayOrigin.z],
+          direction: [localRayDirection.x, localRayDirection.y, localRayDirection.z],
+        },
+        surfaceLocalPosition: surfaceLocalPoint
+          ? [surfaceLocalPoint.x, surfaceLocalPoint.y, surfaceLocalPoint.z]
+          : undefined,
+        surfaceNormal: localNormal ? [localNormal.x, localNormal.y, localNormal.z] : undefined,
+        surfaceObject: point.surface?.object,
+        surfaceHit:
+          semanticSurfaceQueryRef.current && point.surface
+            ? {
+                kind: point.surface.descriptor.kind,
+                hostId: point.surface.hostId,
+                face: classifiedFace?.face ?? 'unknown',
+                levelId: useViewer.getState().selection.levelId ?? undefined,
+                side: classifiedFace?.side,
+              }
+            : undefined,
         nativeEvent: nativeEvent as any, // Type compatibility with ThreeEvent
       }
 
@@ -107,9 +278,17 @@ export function useGridEvents(gridY: number) {
       emit('click', e)
     }
 
+    let lastCameraDragMove = Number.NEGATIVE_INFINITY
     const handlePointerMove = (e: PointerEvent) => {
-      // Emit move even if camera is dragging, so tools like PolygonEditor still work
-      emit('move', e)
+      // Moves keep tool cursor snapshots current, including wheel zoom during a tool gesture.
+      if (useViewer.getState().cameraDragging) {
+        const now = performance.now()
+        if (now - lastCameraDragMove < CAMERA_DRAG_MOVE_INTERVAL_MS) return
+        lastCameraDragMove = now
+      } else {
+        lastCameraDragMove = Number.NEGATIVE_INFINITY
+      }
+      timeSpan('pointer', () => emit('move', e))
     }
 
     const handleDoubleClick = (e: MouseEvent) => {