@pascal-app/editor 0.8.0 → 0.9.2

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

@@ -0,0 +1,176 @@
+import {
+  type AnyNodeId,
+  type CeilingEvent,
+  type CeilingNode,
+  emitter,
+  resolveLevelId,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useThree } from '@react-three/fiber'
+import { useEffect, useRef } from 'react'
+import { type Object3D, Plane, Raycaster, Vector2, Vector3 } from 'three'
+import useEditor from '../store/use-editor'
+import { getMovingNode } from '../store/use-interaction-scope'
+
+const UP = new Vector3(0, 1, 0)
+
+/** Ray-casting point-in-polygon on ceiling-local [x, z] tuples. */
+function pointInPolygon(x: number, z: number, polygon: Array<[number, number]>): boolean {
+  let inside = false
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const a = polygon[i]!
+    const b = polygon[j]!
+    const intersects =
+      a[1] > z !== b[1] > z && x < ((b[0] - a[0]) * (z - a[1])) / (b[1] - a[1]) + a[0]
+    if (intersects) inside = !inside
+  }
+  return inside
+}
+
+/**
+ * Reliable pointer events for placing ceiling-attached items.
+ *
+ * Mirrors {@link useGridEvents} (the floor path): rather than relying on the
+ * thin, single-sided `ceiling-grid` overlay mesh to be hit by R3F's raycaster —
+ * which misses from the "wrong" camera side, near polygon edges/holes, or while
+ * the overlay is mid-reveal, dropping the commit click even though the green box
+ * still shows — it intersects a math plane at each ceiling's height (double-sided,
+ * so it hits from above or below) and point-in-polygon tests the hit. Emits
+ * `ceiling:enter/move/leave/click` so both the placement coordinator and the 2D
+ * floor-plan item preview keep working.
+ *
+ * Active only while a ceiling-attached item is being placed or moved. The
+ * `ceiling-grid` mesh no longer emits these events (see `CeilingRenderer`), so
+ * this is the single, reliable source.
+ */
+export function useCeilingEvents() {
+  const { camera, gl } = useThree()
+  const raycaster = useRef(new Raycaster())
+  const pointer = useRef(new Vector2())
+  const plane = useRef(new Plane(UP.clone(), 0))
+  const worldHit = useRef(new Vector3())
+  const meshWorld = useRef(new Vector3())
+  const hoveredRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    const canvas = gl.domElement
+
+    const isActive = (): boolean => {
+      const ed = useEditor.getState()
+      if (ed.selectedItem?.attachTo === 'ceiling') return true
+      const moving = getMovingNode()
+      return moving?.type === 'item' && moving.asset?.attachTo === 'ceiling'
+    }
+
+    type Hit = { node: CeilingNode; mesh: Object3D; world: Vector3; local: Vector3 }
+
+    // The ceiling on the active level whose plane the cursor ray crosses inside
+    // its polygon, nearest the camera.
+    const pick = (nativeEvent: PointerEvent | MouseEvent): Hit | null => {
+      const activeLevelId = useViewer.getState().selection.levelId
+      if (!activeLevelId) return null
+
+      const rect = canvas.getBoundingClientRect()
+      pointer.current.x = ((nativeEvent.clientX - rect.left) / rect.width) * 2 - 1
+      pointer.current.y = -((nativeEvent.clientY - rect.top) / rect.height) * 2 + 1
+      raycaster.current.setFromCamera(pointer.current, camera)
+
+      const nodes = useScene.getState().nodes
+      const ceilingIds = sceneRegistry.byType.ceiling
+      if (!ceilingIds) return null
+
+      let best: Hit | null = null
+      let bestDist = Number.POSITIVE_INFINITY
+
+      for (const id of ceilingIds) {
+        const node = nodes[id as AnyNodeId] as CeilingNode | undefined
+        if (node?.type !== 'ceiling' || node.polygon.length < 3) continue
+        if (resolveLevelId(node, nodes) !== activeLevelId) continue
+        const mesh = sceneRegistry.nodes.get(id)
+        if (!mesh) continue
+
+        mesh.getWorldPosition(meshWorld.current)
+        plane.current.set(UP, -meshWorld.current.y)
+        if (!raycaster.current.ray.intersectPlane(plane.current, worldHit.current)) continue
+
+        const local = mesh.worldToLocal(worldHit.current.clone())
+        if (!pointInPolygon(local.x, local.z, node.polygon)) continue
+
+        const dist = raycaster.current.ray.origin.distanceToSquared(worldHit.current)
+        if (dist < bestDist) {
+          bestDist = dist
+          best = { node, mesh, world: worldHit.current.clone(), local }
+        }
+      }
+      return best
+    }
+
+    const buildEvent = (hit: Hit, nativeEvent: PointerEvent | MouseEvent): CeilingEvent => ({
+      node: hit.node,
+      position: [hit.world.x, hit.world.y, hit.world.z],
+      localPosition: [hit.local.x, hit.local.y, hit.local.z],
+      normal: [0, 1, 0],
+      object: hit.mesh,
+      stopPropagation: () => {},
+      nativeEvent: nativeEvent as never,
+    })
+
+    const emitLeave = (nativeEvent: PointerEvent | MouseEvent) => {
+      const id = hoveredRef.current
+      if (!id) return
+      hoveredRef.current = null
+      const node = useScene.getState().nodes[id as AnyNodeId] as CeilingNode | undefined
+      const mesh = sceneRegistry.nodes.get(id)
+      if (!node || !mesh) return
+      emitter.emit(
+        'ceiling:leave',
+        buildEvent(
+          { node, mesh, world: meshWorld.current.clone(), local: new Vector3() },
+          nativeEvent,
+        ),
+      )
+    }
+
+    const onMove = (e: PointerEvent) => {
+      if (!isActive()) {
+        emitLeave(e)
+        return
+      }
+      const hit = pick(e)
+      if (!hit) {
+        emitLeave(e)
+        return
+      }
+      const ev = buildEvent(hit, e)
+      if (hoveredRef.current !== hit.node.id) {
+        if (hoveredRef.current) emitLeave(e)
+        hoveredRef.current = hit.node.id
+        emitter.emit('ceiling:enter', ev)
+      }
+      emitter.emit('ceiling:move', ev)
+    }
+
+    const onClick = (e: MouseEvent) => {
+      if (useViewer.getState().cameraDragging) return
+      if (e.button !== 0) return
+      if (!isActive()) return
+      const hit = pick(e)
+      if (!hit) return
+      emitter.emit('ceiling:click', buildEvent(hit, e))
+    }
+
+    const onPointerLeave = (e: PointerEvent) => emitLeave(e)
+
+    canvas.addEventListener('pointermove', onMove)
+    canvas.addEventListener('click', onClick)
+    canvas.addEventListener('pointerleave', onPointerLeave)
+
+    return () => {
+      canvas.removeEventListener('pointermove', onMove)
+      canvas.removeEventListener('click', onClick)
+      canvas.removeEventListener('pointerleave', onPointerLeave)
+    }
+  }, [camera, gl])
+}

package/src/hooks/use-drag-action.ts

@@ -0,0 +1,127 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type ChildQuery,
+  createDragSession,
+  createSceneApi,
+  type DragAction,
+  type DragSessionInput,
+  emitter,
+  type GridEvent,
+  type Modifiers,
+  type SpatialQuery,
+  useScene,
+} from '@pascal-app/core'
+import { useEffect, useRef } from 'react'
+
+const sceneApi = createSceneApi(useScene)
+
+function modifiersFromGridEvent(event: GridEvent): Modifiers {
+  // Both grid-event emit paths (use-grid-events.ts and the floorplan panel)
+  // store the raw DOM event directly at `.nativeEvent` — there is no second
+  // `.nativeEvent` hop.
+  const ne = event.nativeEvent as Partial<MouseEvent> | undefined
+  return {
+    shift: ne?.shiftKey ?? false,
+    alt: ne?.altKey ?? false,
+    ctrl: ne?.ctrlKey ?? false,
+    meta: ne?.metaKey ?? false,
+  }
+}
+
+export type UseDragActionArgs<Ctx, Draft> = {
+  /** When true the session is live: subscribes to grid events + Esc.
+   * Flipping to false (or unmount) cancels and cleans up. */
+  active: boolean
+  action: DragAction<Ctx, Draft>
+  /** Captured once at the moment `active` flips to true. */
+  initial: DragSessionInput
+  /** Relations cascade plumbing. */
+  spatialQuery?: SpatialQuery
+  childQuery?: ChildQuery
+  /** Fires once after `action.commit` returns true. */
+  onCommit?: () => void
+  /** Fires once after `action.cancel` (Esc, unmount, or commit-returns-false). */
+  onCancel?: () => void
+  /**
+   * Milliseconds after activation during which `grid:click` is swallowed.
+   * Stops the very click that mounted this tool (a DOM button or 3D
+   * handle elsewhere) from cascading into the grid and immediately
+   * committing the drag. Defaults to 150ms — matches the legacy guard
+   * used by every kind-owned tool entered via a click.
+   */
+  activationGraceMs?: number
+}
+
+/**
+ * React hook wrapping the pure `createDragSession` orchestrator with the
+ * editor's grid event emitter and an Esc-to-cancel keyboard binding.
+ *
+ * - Pauses scene history when active → resumes on commit/cancel/unmount
+ * - Per `grid:move` runs preview + snap + apply and cascades dirty marks
+ * - `grid:click` triggers commit; Escape triggers cancel
+ *
+ * For tests of the underlying behavior, drive `createDragSession` directly
+ * (no React needed). This hook is the thin glue.
+ */
+export function useDragAction<Ctx, Draft>(args: UseDragActionArgs<Ctx, Draft>) {
+  // Stable refs so handlers don't re-bind when callbacks change.
+  const argsRef = useRef(args)
+  argsRef.current = args
+
+  useEffect(() => {
+    if (!args.active) return
+
+    const session = createDragSession<Ctx, Draft>(argsRef.current.action, sceneApi, {
+      spatialQuery: argsRef.current.spatialQuery,
+      childQuery: argsRef.current.childQuery,
+      onCommit: () => argsRef.current.onCommit?.(),
+      onCancel: () => argsRef.current.onCancel?.(),
+    })
+
+    session.start(argsRef.current.initial)
+
+    const activatedAt = Date.now()
+    const graceMs = argsRef.current.activationGraceMs ?? 150
+
+    const onMove = (event: GridEvent) => {
+      const point: readonly [number, number] = [event.localPosition[0], event.localPosition[2]]
+      session.move(point, modifiersFromGridEvent(event))
+    }
+
+    const onClick = (event: GridEvent) => {
+      // Swallow the click that mounted this tool — otherwise the very
+      // first grid:click cascades into commit() before any move().
+      if (Date.now() - activatedAt < graceMs) {
+        event.nativeEvent?.stopPropagation?.()
+        return
+      }
+      session.commit()
+    }
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') session.cancel()
+    }
+
+    emitter.on('grid:move', onMove)
+    emitter.on('grid:click', onClick)
+    if (typeof window !== 'undefined') {
+      window.addEventListener('keydown', onKeyDown)
+    }
+
+    return () => {
+      emitter.off('grid:move', onMove)
+      emitter.off('grid:click', onClick)
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('keydown', onKeyDown)
+      }
+      // If the parent flipped `active` to false (or unmounted) while we were
+      // still mid-drag, treat it as a cancel — no dangling history pause.
+      session.dispose()
+    }
+  }, [args.active])
+}
+
+export type { AnyNode, AnyNodeId, DragAction, Modifiers }