@pascal-app/editor 1.0.0 → 1.0.3

package/src/components/editor/group-transform-shared.ts

@@ -1,11 +1,15 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  calculateLevelMiters,
+  getWallPlanFootprint,
   nodeRegistry,
   resolveBuildingForLevel,
   sceneRegistry,
+  useScene,
+  type WallNode,
 } from '@pascal-app/core'
-import { Box3, Matrix4 } from 'three'
+import { Box3, type BufferGeometry, Matrix4, type Object3D, Vector3 } from 'three'
 
 // Shared plumbing for the group transform gizmos (rotate + move). Both operate
 // on the same multi-selection: classify each participant by how its placement
@@ -242,48 +246,6 @@ export function collectParticipants(
   return { starts, links }
 }
 
-// Grow a selection to the full connected component of walls/fences: any
-// endpoint node transitively reachable through shared junctions from a selected
-// endpoint node joins in, so the whole rigid structure transforms as one piece
-// (rather than tearing/stretching at the boundary). Non-endpoint selections
-// (items, columns) pass through unchanged.
-export function expandToComponent(
-  selectedIds: string[],
-  sceneNodes: Record<string, AnyNode | undefined>,
-  levelId: string | null,
-): string[] {
-  const endpoints: { id: string; start: Vec2; end: Vec2 }[] = []
-  for (const [id, node] of Object.entries(sceneNodes)) {
-    if (classifyParticipant(node, levelId, sceneNodes) === 'endpoint') {
-      const n = node as AnyNode & { start: Vec2; end: Vec2 }
-      endpoints.push({ id, start: [n.start[0], n.start[1]], end: [n.end[0], n.end[1]] })
-    }
-  }
-  const included = new Set(selectedIds)
-  if (!endpoints.some((e) => included.has(e.id))) return selectedIds
-
-  let changed = true
-  while (changed) {
-    changed = false
-    for (const e of endpoints) {
-      if (included.has(e.id)) continue
-      const touches = endpoints.some(
-        (o) =>
-          included.has(o.id) &&
-          (nearPoint(e.start, o.start) ||
-            nearPoint(e.start, o.end) ||
-            nearPoint(e.end, o.start) ||
-            nearPoint(e.end, o.end)),
-      )
-      if (touches) {
-        included.add(e.id)
-        changed = true
-      }
-    }
-  }
-  return Array.from(included)
-}
-
 // Per-node field patch, keyed for `useLiveNodeOverrides.setMany` during a live
 // preview and for the single batched `updateNodes` on commit.
 export type GroupPatch = readonly [AnyNodeId, Record<string, unknown>]
@@ -389,9 +351,24 @@ export function rotateGroupSnapshots(
 
 export type GroupPlanBounds = { minX: number; minZ: number; maxX: number; maxZ: number }
 
-// Level-frame XZ extents of the participant DATA — the mesh-free sibling of
-// `computeGroupBox`, used when meshes aren't mounted yet.
-function participantExtents(starts: ParticipantStart[]): GroupPlanBounds | null {
+const planCorner = new Vector3()
+const planMatrix = new Matrix4()
+
+/**
+ * The selection's footprint in the level frame — the plan's own coordinates,
+ * measured from node data wherever the plan draws from data: walls by their
+ * mitered outline, polygon hosts (slab, ceiling, zone) by their polygon, fences
+ * by their run. Only placed objects (items, columns, stairs…) measure their
+ * meshes: bounds go through `frameInv × matrixWorld` (a world box can't be
+ * carried into a rotated building's frame), placeholders — unbuilt while the
+ * 3D scene is paused in 2D-only view — are skipped, and a node with no built
+ * mesh falls back to its anchor.
+ */
+export function groupPlanBounds(
+  starts: ParticipantStart[],
+  frameInv: Matrix4,
+): GroupPlanBounds | null {
+  const nodes = useScene.getState().nodes
   let minX = Number.POSITIVE_INFINITY
   let minZ = Number.POSITIVE_INFINITY
   let maxX = Number.NEGATIVE_INFINITY
@@ -402,43 +379,72 @@ function participantExtents(starts: ParticipantStart[]): GroupPlanBounds | null
     maxX = Math.max(maxX, x)
     maxZ = Math.max(maxZ, z)
   }
+  const miters = new Map<string | null, ReturnType<typeof calculateLevelMiters>>()
+  const wallOutline = (wall: WallNode) => {
+    const levelId = wall.parentId ?? null
+    let levelMiters = miters.get(levelId)
+    if (!levelMiters) {
+      levelMiters = calculateLevelMiters(
+        Object.values(nodes).filter(
+          (node): node is WallNode => node?.type === 'wall' && (node.parentId ?? null) === levelId,
+        ),
+      )
+      miters.set(levelId, levelMiters)
+    }
+    return getWallPlanFootprint(wall, levelMiters)
+  }
+  const measureMeshes = (id: string) => {
+    const obj = sceneRegistry.nodes.get(id as AnyNodeId)
+    if (!obj) return false
+    obj.updateWorldMatrix(true, true)
+    let found = false
+    obj.traverse((child: Object3D) => {
+      const geometry = (child as Object3D & { geometry?: BufferGeometry }).geometry
+      if (!child.visible || !geometry || geometry.userData.placeholder) return
+      // Always fresh: geometries rebuilt in place keep a stale cached box.
+      geometry.computeBoundingBox()
+      const bounds = geometry.boundingBox
+      if (!bounds || bounds.isEmpty()) return
+      planMatrix.multiplyMatrices(frameInv, child.matrixWorld)
+      for (let corner = 0; corner < 8; corner++) {
+        planCorner
+          .set(
+            corner & 1 ? bounds.max.x : bounds.min.x,
+            corner & 2 ? bounds.max.y : bounds.min.y,
+            corner & 4 ? bounds.max.z : bounds.min.z,
+          )
+          .applyMatrix4(planMatrix)
+        reach(planCorner.x, planCorner.z)
+      }
+      found = true
+    })
+    return found
+  }
   for (const s of starts) {
+    const node = nodes[s.id]
     if (s.kind === 'endpoint') {
+      const outline = node?.type === 'wall' ? wallOutline(node) : []
+      if (outline.length > 0) {
+        for (const point of outline) reach(point.x, point.y)
+        continue
+      }
       reach(s.start[0], s.start[1])
       reach(s.end[0], s.end[1])
+      const path = (node as { path?: unknown } | undefined)?.path
+      if (isVec2Array(path)) for (const [x, z] of path) reach(x, z)
     } else if (s.kind === 'polygon') {
-      for (const [x, z] of s.polygon) {
-        reach(x, z)
-      }
-    } else {
+      for (const [x, z] of s.polygon) reach(x, z)
+    } else if (!measureMeshes(s.id)) {
       reach(s.position[0], s.position[2])
     }
   }
-  if (!Number.isFinite(minX)) return null
-  return { minX, minZ, maxX, maxZ }
+  return Number.isFinite(minX) ? { minX, minZ, maxX, maxZ } : null
 }
 
-// The one footprint every group transform measures itself against: the
-// selection's mounted meshes (world box, converted into the level frame) with
-// the participant DATA extents as the fallback when the meshes aren't up yet
-// (Duplicate picks up its clones a frame before their renderers mount). Anchor
-// points alone sit metres inside a wide selection's real footprint, so a
-// gesture that pivots on the data extents orbits a different point than the
-// idle keyboard rotate and the rotate gizmos, which both use the mesh box.
-export function groupPlanBounds(
-  box: Box3 | null,
-  starts: ParticipantStart[],
-  frameInv: Matrix4,
-): GroupPlanBounds | null {
-  if (!box) return participantExtents(starts)
-  const min = box.min.clone().applyMatrix4(frameInv)
-  const max = box.max.clone().applyMatrix4(frameInv)
-  return {
-    minX: Math.min(min.x, max.x),
-    minZ: Math.min(min.z, max.z),
-    maxX: Math.max(min.x, max.x),
-    maxZ: Math.max(min.z, max.z),
-  }
+/** `groupPlanBounds` for a selection: the dashed boxes and gizmos measure this. */
+export function computeGroupPlanBox(ids: string[], levelId: string | null): GroupPlanBounds | null {
+  const { starts } = collectParticipants(ids, useScene.getState().nodes, levelId)
+  return groupPlanBounds(starts, levelFrame(levelId).inverse)
 }
 
 export const planBoundsCenter = (b: GroupPlanBounds): Vec2 => [

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-placement.test.ts

@@ -0,0 +1,111 @@
+import { expect, test } from 'bun:test'
+import { type AnyNode, createSceneApi, type LinearResizeHandle, useScene } from '@pascal-app/core'
+import { Euler, Vector3 } from 'three'
+import { createArrowHandleGeometry } from './handle-arrow'
+import {
+  computeFreezeOffset,
+  resolveLinearHandlePosition,
+  resolveLinearHandleRotation,
+} from './handle-placement'
+
+const scene = createSceneApi(useScene)
+for (const axis of ['x', 'y', 'z'] as const) {
+  test(`${axis} clearance preserves sufficient offsets and keeps even hovered arrow tails clear at different scales`, () => {
+    const index = axis === 'x' ? 0 : axis === 'y' ? 1 : 2
+    const geometry = createArrowHandleGeometry(true)
+    geometry.computeBoundingBox()
+    const tail = geometry.boundingBox!.min.x * 1.12
+    for (const edge of [0.06, 1.2, -0.4]) {
+      const position: [number, number, number] = [0, 0, 0]
+      position[index] = edge + 0.15
+      const descriptor: LinearResizeHandle<null> = {
+        kind: 'linear-resize',
+        axis,
+        anchor: 'center',
+        currentValue: () => 1,
+        apply: () => null,
+        placement: { position: () => position, clearance: { edge: () => edge, distance: 0.4 } },
+      }
+      for (const scale of [0.1, 0.325, 0.65, 1.3, 3]) {
+        const resolved = resolveLinearHandlePosition(descriptor, null, scene, scale)
+        expect(resolved[index] + tail * scale - edge).toBeGreaterThan(0.1 * scale)
+        if (0.4 * scale <= 0.15) expect(resolved).toEqual(position)
+        resolved.forEach((value, i) => {
+          if (i !== index) expect(value).toBe(position[i]!)
+        })
+      }
+      delete descriptor.placement.clearance
+      expect(resolveLinearHandlePosition(descriptor, null, scene, 3)).toBe(position)
+    }
+    geometry.dispose()
+  })
+}
+
+test('array rotations keep sibling handles finite during rotation and resize', () => {
+  const initial = { position: [1, 2, 3], rotation: [0, Math.PI / 2, 0] } as unknown as AnyNode
+  const rotated = { ...initial, rotation: [0, Math.PI, 0] } as unknown as AnyNode
+  expect(computeFreezeOffset(rotated, initial)).toEqual([0, 0, 0])
+  const moved = { ...initial, position: [2, 4, 3] } as unknown as AnyNode
+  const offset = computeFreezeOffset(moved, initial)
+  expect(offset[0]).toBeCloseTo(0)
+  expect(offset[1]).toBe(2)
+  expect(offset[2]).toBeCloseTo(1)
+  expect(
+    computeFreezeOffset(moved, { ...initial, rotation: Math.PI / 2 } as unknown as AnyNode),
+  ).toEqual(offset)
+})
+
+for (const axis of ['x', 'y', 'z'] as const) {
+  test(`${axis} negative direction keeps hovered arrow above its lower-edge clearance`, () => {
+    const index = axis === 'x' ? 0 : axis === 'y' ? 1 : 2
+    const geometry = createArrowHandleGeometry(true)
+    geometry.computeBoundingBox()
+    const tail = -geometry.boundingBox!.min.x * 1.12
+    for (const edge of [-2, 0, 2]) {
+      const position: [number, number, number] = [0, 0, 0]
+      position[index] = edge - 0.15
+      const descriptor: LinearResizeHandle<null> = {
+        kind: 'linear-resize',
+        axis,
+        anchor: 'max',
+        direction: -1,
+        currentValue: () => 1,
+        apply: () => null,
+        placement: { position: () => position, clearance: { edge: () => edge, distance: 0.4 } },
+      }
+      for (const scale of [0.1, 0.325, 0.65, 1.3, 3]) {
+        const resolved = resolveLinearHandlePosition(descriptor, null, scene, scale)
+        expect(edge - (resolved[index] + tail * scale)).toBeGreaterThan(0.1 * scale)
+        if (0.4 * scale <= 0.15) expect(resolved).toEqual(position)
+        const pointing = new Vector3(1, 0, 0)
+          .applyEuler(new Euler(...resolveLinearHandleRotation(descriptor, resolved)))
+          .applyAxisAngle(new Vector3(0, 1, 0), axis === 'z' ? -Math.PI / 2 : 0)
+        expect(pointing.getComponent(index)).toBeCloseTo(-1)
+      }
+    }
+    geometry.dispose()
+  })
+}
+
+test('unspecified direction preserves vertical position heuristic and wall-facing blade', () => {
+  const descriptor: LinearResizeHandle<null> = {
+    kind: 'linear-resize',
+    axis: 'y',
+    anchor: 'min',
+    currentValue: () => 1,
+    apply: () => null,
+    placement: { position: () => [0, 0, 0] },
+  }
+  expect(resolveLinearHandleRotation(descriptor, [0, -1, 0])).toEqual([
+    0,
+    Math.PI / 2,
+    -Math.PI / 2,
+  ])
+  expect(resolveLinearHandleRotation(descriptor, [0, 1, 0])).toEqual([0, Math.PI / 2, Math.PI / 2])
+  expect(
+    resolveLinearHandleRotation({ ...descriptor, axis: 'x', faceNormal: true }, [0, 0, 0]),
+  ).toEqual([Math.PI / 2, 0, 0])
+  expect(
+    resolveLinearHandleRotation({ ...descriptor, axis: 'z', faceNormal: true }, [0, 0, 0]),
+  ).toEqual([0, 0, 0])
+})

package/src/components/editor/handles/handle-placement.ts

@@ -0,0 +1,69 @@
+import type { AnyNode, LinearResizeHandle, RadialResizeHandle, SceneApi } from '@pascal-app/core'
+
+export function resolveLinearHandlePosition<N>(
+  descriptor: LinearResizeHandle<N> | RadialResizeHandle<N>,
+  node: N,
+  scene: SceneApi,
+  baseScale: number,
+): readonly [number, number, number] {
+  const position = descriptor.placement.position(node, scene)
+  const clearance = descriptor.kind === 'linear-resize' ? descriptor.placement.clearance : undefined
+  if (!clearance) return position
+  const index = descriptor.axis === 'x' ? 0 : descriptor.axis === 'y' ? 1 : 2
+  const result: [number, number, number] = [...position]
+  const direction = descriptor.kind === 'linear-resize' ? (descriptor.direction ?? 1) : 1
+  const edge = clearance.edge(node, scene) + direction * clearance.distance * baseScale
+  result[index] = direction === -1 ? Math.min(result[index], edge) : Math.max(result[index], edge)
+  return result
+}
+
+export function resolveLinearHandleRotation<N>(
+  descriptor: LinearResizeHandle<N> | RadialResizeHandle<N>,
+  position: readonly [number, number, number],
+): [number, number, number] {
+  const direction = descriptor.kind === 'linear-resize' ? descriptor.direction : undefined
+  if (descriptor.axis === 'y') {
+    const sign = direction ?? (position[1] < 0 ? -1 : 1)
+    return [0, Math.PI / 2, (sign * Math.PI) / 2]
+  }
+  const faceNormal =
+    descriptor.kind === 'linear-resize' && descriptor.axis === 'x' && descriptor.faceNormal
+  return [faceNormal ? Math.PI / 2 : 0, 0, direction === -1 ? Math.PI : 0]
+}
+
+// Offset, in node-local frame, that compensates for `position` drift on
+// the mesh during an asymmetric resize. Width/length L+R recompute
+// `position` so the anchored edge stays world-fixed — the renderer
+// follows that override, the ride object moves, and every arrow under
+// it would drift along with the mesh center. Subtracting this offset
+// from a non-active arrow's local placement undoes that drift so it
+// stays at its pre-drag world position.
+//
+// Rotation drags don't change `position`, so the offset collapses to
+// zero and non-active arrows naturally rotate with the mesh — which is
+// the desired behaviour (the whole rig rotates as a unit).
+export function computeFreezeOffset(
+  liveNode: AnyNode,
+  preDragNode: AnyNode,
+): [number, number, number] {
+  // Not every node in the union carries a `position` field (sites are the
+  // notable holdout — they don't have handles anyway, but TypeScript still
+  // requires us to discriminate). Guarded access keeps the freeze logic
+  // safe for the few node kinds that lack the field.
+  const liveP = (liveNode as { position?: readonly [number, number, number] }).position ?? [0, 0, 0]
+  const preP = (preDragNode as { position?: readonly [number, number, number] }).position ?? [
+    0, 0, 0,
+  ]
+  const deltaWorldX = liveP[0] - preP[0]
+  const deltaWorldY = liveP[1] - preP[1]
+  const deltaWorldZ = liveP[2] - preP[2]
+  const rotation = (preDragNode as { rotation?: number | readonly number[] }).rotation
+  const rotY = typeof rotation === 'number' ? rotation : (rotation?.[1] ?? 0)
+  // World → node-local for Y-axis rotation by rotY (THREE.Object3D
+  // rotation-y convention): inverse is rotation by -rotY around +Y.
+  const cosR = Math.cos(rotY)
+  const sinR = Math.sin(rotY)
+  const deltaLocalX = cosR * deltaWorldX - sinR * deltaWorldZ
+  const deltaLocalZ = sinR * deltaWorldX + cosR * deltaWorldZ
+  return [deltaLocalX, deltaWorldY, deltaLocalZ]
+}

package/src/components/editor/handles/linear-resize-drag.ts

@@ -1,14 +1,23 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  cascadeDirty,
   type HandleDragModifiers,
   type LinearResizeHandle,
+  type RadialResizeHandle,
   type SceneApi,
   useLiveNodeOverrides,
   useScene,
 } from '@pascal-app/core'
 import { replacePreviewOverrideIds } from './preview-overrides'
 
+export function linearResizeFactor<N>(
+  descriptor: LinearResizeHandle<N> | RadialResizeHandle<N>,
+): number {
+  if (descriptor.kind === 'radial-resize') return 1
+  return descriptor.anchor === 'center' ? 2 : descriptor.anchor === 'min' ? 1 : -1
+}
+
 export function createLinearResizeDragBinding({
   descriptor,
   initialNode,
@@ -52,14 +61,16 @@ export function createLinearResizeDragBinding({
           previewEntries.map(([id, previewPatch]) => [id, previewPatch as Record<string, unknown>]),
         )
       for (const [previewId] of previewEntries) {
-        useScene.getState().markDirty(previewId)
+        for (const id of cascadeDirty(previewId, { scene: sceneApi }))
+          useScene.getState().markDirty(id)
       }
       return patch
     },
     clearPreview(): void {
       for (const previewId of previewOverrideIds) {
         useLiveNodeOverrides.getState().clear(previewId)
-        useScene.getState().markDirty(previewId)
+        for (const id of cascadeDirty(previewId, { scene: sceneApi }))
+          useScene.getState().markDirty(id)
       }
       previewOverrideIds = new Set()
     },