@pascal-app/editor 1.0.1 → 1.0.4

package/src/components/editor/handles/handle-arrow.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { type Cursor, emitter } from '@pascal-app/core'
+import { type Cursor, emitter, sceneRegistry } from '@pascal-app/core'
 import type { ThreeEvent } from '@react-three/fiber'
 import { type ReactNode, useEffect, useMemo, useRef } from 'react'
 import {
@@ -17,11 +17,15 @@ import {
   type Raycaster,
   Shape,
   TorusGeometry,
+  Vector3,
 } from 'three'
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { EDITOR_HANDLE_HIT_AREA_USER_DATA_KEY } from '../../../lib/direct-manipulation'
+import { createSpatialDragPlane, intersectSpatialDragPlane } from '../../../lib/spatial-drag-plane'
+import { getSpatialPointerId, spatialPointerInput } from '../../../lib/spatial-pointer-input'
+import { getActiveBuildingId } from '../../../lib/world-grid-snap'
 import useEditor from '../../../store/use-editor'
 
 // While a press-drag move is in flight (`placementDragMode`), the move tool
@@ -42,6 +46,7 @@ export const NO_RAYCAST = () => null
 export const HIT_AREA_MARGIN = 0.035
 
 const HIT_AREA_RENDER_ORDER = 1011
+const HIT_AREA_POINTER_EVENTS_ORDER = 10
 const HIT_AREA_THICKNESS = 0.08
 const CHEVRON_MIN_X = -0.2
 const CHEVRON_MAX_X = 0.22
@@ -492,15 +497,80 @@ export function InvisibleHandleHitArea({
   onPointerLeave: PointerHandler
   scale: number
 }) {
+  const handlePointerDown: PointerHandler = (event) => {
+    const spatialPointerId = getSpatialPointerId(event.nativeEvent)
+    if (spatialPointerId) {
+      const pointerTarget = event.object as typeof event.object & {
+        releasePointerCapture?: (pointerId: number) => void
+        setPointerCapture?: (pointerId: number) => void
+      }
+      pointerTarget.setPointerCapture?.(event.pointerId)
+      const buildingId = getActiveBuildingId()
+      const building = buildingId ? sceneRegistry.nodes.get(buildingId) : undefined
+      building?.updateWorldMatrix(true, false)
+      const inverse = building?.matrixWorld.clone().invert()
+      const initialPoint = event.point.clone()
+      const plane = createSpatialDragPlane(initialPoint, event.ray, building?.matrixWorld)
+      const point = new Vector3()
+      let seeded = false
+      const emitPoint = (position: Vector3, ray = event.ray) => {
+        const local = inverse ? position.clone().applyMatrix4(inverse) : position
+        emitter.emit('grid:move', {
+          position: [position.x, position.y, position.z],
+          localPosition: [local.x, local.y, local.z],
+          nativeEvent: {
+            ...event.nativeEvent,
+            inputSource: spatialPointerId,
+            pointerType: 'xr',
+            pointerId: event.pointerId,
+            target: event.nativeEvent.target,
+            ray: ray.clone(),
+          } as never,
+        })
+      }
+      // Direct resize sessions replace this capture in onPointerDown below.
+      // Move/reshape tools consume grid events in a plane frozen at the grip.
+      spatialPointerInput.capture(spatialPointerId, {
+        onMove: (ray) => {
+          if (!seeded) {
+            emitPoint(initialPoint)
+            seeded = true
+          }
+          if (intersectSpatialDragPlane(ray, plane, point)) emitPoint(point, ray)
+        },
+        onRelease: () => {
+          pointerTarget.releasePointerCapture?.(event.pointerId)
+          window.dispatchEvent(
+            new PointerEvent('pointerup', {
+              bubbles: true,
+              button: 0,
+              pointerId: event.pointerId,
+              pointerType: 'xr',
+            }),
+          )
+        },
+        onCancel: () => {
+          pointerTarget.releasePointerCapture?.(event.pointerId)
+          emitter.emit('tool:cancel')
+        },
+        onReplace: () => {
+          pointerTarget.releasePointerCapture?.(event.pointerId)
+        },
+      })
+    }
+    onPointerDown(event)
+  }
+
   return (
     <mesh
       frustumCulled={false}
       geometry={geometry}
       layers={EDITOR_LAYER}
       material={material}
-      onPointerDown={onPointerDown}
+      onPointerDown={handlePointerDown}
       onPointerEnter={onPointerEnter}
       onPointerLeave={onPointerLeave}
+      {...({ pointerEventsOrder: HIT_AREA_POINTER_EVENTS_ORDER } as Record<string, unknown>)}
       raycast={hitAreaRaycast}
       renderOrder={HIT_AREA_RENDER_ORDER}
       scale={scale}

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')
+  }
+})