@pascal-app/editor 1.0.0 → 1.0.3

package/src/components/editor/wall-move-side-handles.tsx

@@ -49,6 +49,8 @@ import {
 import { isHistoryShortcut } from '../../lib/history'
 import { endpointReshapeScope } from '../../lib/interaction/scope'
 import { sfxEmitter } from '../../lib/sfx-bus'
+import { intersectSpatialDragPlane, spatialDragLocalY } from '../../lib/spatial-drag-plane'
+import { getSpatialPointerId, spatialPointerInput } from '../../lib/spatial-pointer-input'
 import useEditor, { isGridSnapActive, isMagneticSnapActive } from '../../store/use-editor'
 import useInteractionScope, {
   useEndpointReshape,
@@ -769,7 +771,9 @@ function WallBaseElevationHandle({
       const midpointWorld = new Vector3(midpoint[0], initialBase, midpoint[1]).applyMatrix4(
         levelObject.matrixWorld,
       )
-      const planeNormal = new Vector3().subVectors(camera.position, midpointWorld).setY(0)
+      const planeNormal = new Vector3()
+        .subVectors(camera.getWorldPosition(new Vector3()), midpointWorld)
+        .setY(0)
       if (planeNormal.lengthSq() === 0) return null
       planeNormal.normalize()
       const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, midpointWorld)
@@ -908,16 +912,12 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
     const levelObject = wall.parentId ? sceneRegistry.nodes.get(wall.parentId) : null
     if (!levelObject) return
 
-    // Vertical plane through the wall midpoint whose normal points toward
-    // the camera (projected to horizontal). Raycasting against it converts
-    // pointer movement into a world-space Y value.
+    levelObject.updateWorldMatrix(true, false)
+    const worldToLocal = levelObject.matrixWorld.clone().invert()
     const midpointWorld = new Vector3(midX, 0, midZ).applyMatrix4(levelObject.matrixWorld)
-    const planeNormal = new Vector3().subVectors(camera.position, midpointWorld).setY(0)
-    if (planeNormal.lengthSq() === 0) return
-    planeNormal.normalize()
-    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, midpointWorld)
-
     const ndc = new Vector2()
+    const spatialPointerId = getSpatialPointerId(event.nativeEvent)
+    const spatialRay = spatialPointerId ? event.ray.clone() : null
     const setNDC = (clientX: number, clientY: number) => {
       const rect = gl.domElement.getBoundingClientRect()
       ndc.set(
@@ -926,17 +926,39 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       )
     }
 
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
-    const hit = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hit)) return
+    let plane: Plane | null = null
+    let initialY: number
+    if (spatialRay) {
+      const worldUp = new Vector3(0, 1, 0).transformDirection(levelObject.matrixWorld)
+      const axisPoint = new Vector3()
+      const spatialRayLocalY = (ray: Ray) => {
+        const axisParameter = closestAxisParameterToRay(midpointWorld, worldUp, ray)
+        axisPoint.copy(midpointWorld).addScaledVector(worldUp, axisParameter)
+        return spatialDragLocalY(axisPoint, worldToLocal)
+      }
+      initialY = spatialRayLocalY(spatialRay)
+    } else {
+      // A camera-facing vertical plane gives desktop pointer movement a stable
+      // world-space height. Spatial pointers use the closest point on the
+      // wall's vertical axis instead, which remains defined for vertical rays.
+      const planeNormal = new Vector3()
+        .subVectors(camera.getWorldPosition(new Vector3()), midpointWorld)
+        .setY(0)
+      if (planeNormal.lengthSq() === 0) return
+      plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal.normalize(), midpointWorld)
+      setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      const hit = new Vector3()
+      if (!intersectSpatialDragPlane(raycaster.ray, plane, hit)) return
+      initialY = spatialDragLocalY(hit, worldToLocal)
+    }
 
     // Dragging the top makes the wall custom-height; seed from the resolved
     // effective height so a plane-bound wall's drag starts at its real top.
     const initialHeight = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes)
-    const initialY = hit.y
     const wallId = wall.id as AnyNodeId
     let pendingHeight = initialHeight
+    let releaseSpatialCapture: (() => void) | null = null
 
     document.body.style.cursor = 'ns-resize'
     sfxEmitter.emit('sfx:item-pick')
@@ -954,9 +976,23 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
     const onMove = (e: PointerEvent) => {
       setNDC(e.clientX, e.clientY)
       raycaster.setFromCamera(ndc, camera)
-      const intersection = new Vector3()
-      if (!raycaster.ray.intersectPlane(plane, intersection)) return
-      const newHeight = Math.max(MIN_WALL_HEIGHT, initialHeight + (intersection.y - initialY))
+      applyRay(raycaster.ray)
+    }
+    const applyRay = (ray: Ray) => {
+      let currentY: number
+      if (spatialRay) {
+        const worldUp = new Vector3(0, 1, 0).transformDirection(levelObject.matrixWorld)
+        const axisParameter = closestAxisParameterToRay(midpointWorld, worldUp, ray)
+        const axisPoint = midpointWorld.clone().addScaledVector(worldUp, axisParameter)
+        currentY = spatialDragLocalY(axisPoint, worldToLocal)
+      } else {
+        if (!plane) return
+        const intersection = new Vector3()
+        if (!intersectSpatialDragPlane(ray, plane, intersection)) return
+        currentY = spatialDragLocalY(intersection, worldToLocal)
+      }
+      const newHeight = Math.max(MIN_WALL_HEIGHT, initialHeight + (currentY - initialY))
+      if (Math.abs(newHeight - pendingHeight) < 1e-6) return
       pendingHeight = newHeight
       useLiveNodeOverrides.getState().set(wallId, { height: newHeight })
       useScene.getState().markDirty(wallId)
@@ -967,6 +1003,8 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       window.removeEventListener('pointerup', onUp)
       window.removeEventListener('pointercancel', onCancel)
       window.removeEventListener('keydown', onKeyDown, true)
+      releaseSpatialCapture?.()
+      releaseSpatialCapture = null
       if (document.body.style.cursor === 'ns-resize') {
         document.body.style.cursor = ''
       }
@@ -981,6 +1019,7 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       // Commit: write the final override-merged value to zustand once
       // (tracked, undoable), then drop the override so the renderer
       // falls back to the scene store.
+      useScene.temporal.getState().resume()
       if (pendingHeight !== initialHeight) {
         useScene.getState().updateNode(wallId, { height: pendingHeight })
       }
@@ -1006,10 +1045,21 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       onCancel()
     }
 
-    dragCleanupRef.current = cleanup
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
+    dragCleanupRef.current = onCancel
+    if (spatialPointerId && spatialRay) {
+      releaseSpatialCapture = spatialPointerInput.capture(spatialPointerId, {
+        onMove: (ray) => {
+          spatialRay.copy(ray)
+          applyRay(spatialRay)
+        },
+        onRelease: onUp,
+        onCancel,
+      })
+    } else {
+      window.addEventListener('pointermove', onMove)
+      window.addEventListener('pointerup', onUp)
+      window.addEventListener('pointercancel', onCancel)
+    }
     window.addEventListener('keydown', onKeyDown, true)
   }
 

package/src/components/editor/wall-opening-highlights.tsx

@@ -11,10 +11,10 @@ import {
   type Group,
   type Mesh,
   MeshBasicMaterial,
-  Vector3,
 } from 'three'
 import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../lib/constants'
+import { copyOverlayWorldTransform } from '../../lib/overlay-transform'
 
 // How far the outline sits outside the opening's own extents, so it reads as
 // a frame *around* the opening rather than coinciding with its edges.
@@ -23,7 +23,6 @@ const PAD = 0.05
 const ACCENT = 0x83_81_ed
 
 const NO_RAYCAST = () => null
-const scratchScale = new Vector3()
 
 // Indigo accent matching the resize-arrow handles — deliberately distinct
 // from the white selection outline so the highlight reads as "editable child
@@ -182,7 +181,7 @@ function OpeningHighlight({ openingId, depth }: { openingId: string; depth: numb
       return
     }
     group.visible = true
-    obj.matrixWorld.decompose(group.position, group.quaternion, scratchScale)
+    copyOverlayWorldTransform(obj, group)
   })
 
   if (!isOpening || !outlineGeometry || !fillGeometry) return null

package/src/components/editor-2d/floorplan-group-move.tsx

@@ -37,8 +37,7 @@ import useInteractionScope, { useMovingNode } from '../../store/use-interaction-
 import {
   classifyParticipant,
   collectParticipants,
-  computeGroupBox,
-  expandToComponent,
+  computeGroupPlanBox,
   type GroupPlanBounds,
   groupPlanBounds,
   levelFrame,
@@ -128,9 +127,8 @@ export function startFloorplanGroupMove(
     const participantIds = selectedIds.filter(
       (id) => classifyParticipant(nodes[id as AnyNodeId], levelId, nodes) !== null,
     )
-    // Move the full connected wall/fence component, mirroring the 3D gizmo.
-    const fullIds = expandToComponent(participantIds, nodes, levelId)
-    const { starts, links } = collectParticipants(fullIds, nodes, levelId)
+    // Only the selection moves; connected walls stretch through `links`, as in 3D.
+    const { starts, links } = collectParticipants(participantIds, nodes, levelId)
     if (starts.length === 0) return null
     const affectedIds: AnyNodeId[] = [...starts.map((s) => s.id), ...links.map((l) => l.id)]
 
@@ -144,10 +142,9 @@ export function startFloorplanGroupMove(
     const candidates = collectAlignmentAnchors(staticNodes, '', levelId)
 
     // The group aligns as one rigid footprint: its bbox corners + center are
-    // the moving anchors. `computeGroupBox` is world-space (the 3D scene stays
-    // mounted under every view mode); plan coords are level-frame, so convert.
+    // the moving anchors, measured in the level frame like the plan itself.
     const { inverse: frameInv } = levelFrame(levelId)
-    const restBounds = groupPlanBounds(computeGroupBox(fullIds), starts, frameInv)
+    const restBounds = groupPlanBounds(starts, frameInv)
     if (!restBounds) return null
     const restAnchors = bboxCornerAnchors(
       'group-move',
@@ -441,12 +438,11 @@ export function startFloorplanGroupRotate(event: {
     (id) => classifyParticipant(nodes[id as AnyNodeId], levelId, nodes) !== null,
   )
   if (participantIds.length === 0) return false
-  const fullIds = expandToComponent(participantIds, nodes, levelId)
-  const { starts, links } = collectParticipants(fullIds, nodes, levelId)
+  const { starts, links } = collectParticipants(participantIds, nodes, levelId)
   if (starts.length === 0) return false
   const affectedIds: AnyNodeId[] = [...starts.map((s) => s.id), ...links.map((l) => l.id)]
   const { inverse: frameInv } = levelFrame(levelId)
-  const bounds = groupPlanBounds(computeGroupBox(fullIds), starts, frameInv)
+  const bounds = groupPlanBounds(starts, frameInv)
   if (!bounds) return false
   // Same pivot as the dashed box the handles hang off (and as the 3D rotate
   // gizmo): its centre, not the anchor points' centre.
@@ -605,8 +601,9 @@ const GROUP_BOX_ROTATE_CURSOR_STYLE = {
 
 /**
  * Dashed bounding box around the current multi-selection's transformable
- * participants (expanded to the welded wall/fence component) — shows what a
- * group drag will carry along, and IS the group's drag handle: press anywhere
+ * participants — what a group drag carries (connected walls outside the
+ * selection stretch at their shared ends to stay joined) — and IS the group's
+ * drag handle: press anywhere
  * inside it to slide the group, click to pick it up. Holding a selection
  * modifier (Cmd/Ctrl/Shift) lets pointer events pass through so members under
  * the box can still be toggled in and out. Rides the live drag delta so it
@@ -653,7 +650,7 @@ export const FloorplanGroupSelectionBox = memo(function FloorplanGroupSelectionB
   }, [])
 
   // `meshEpoch` re-runs the measurement once the meshes settle after a scene
-  // change (undo/redo included) — `computeGroupBox` reads mesh world bounds,
+  // change (undo/redo included) — `computeGroupPlanBox` reads mesh bounds,
   // which lag the `nodes` commit by a frame or two.
   const meshEpoch = useMeshSettleEpoch(nodes)
   const box = useMemo(() => {
@@ -663,17 +660,13 @@ export const FloorplanGroupSelectionBox = memo(function FloorplanGroupSelectionB
       (id) => classifyParticipant(nodes[id as AnyNodeId], levelId, nodes) !== null,
     )
     if (participantIds.length === 0) return null
-    const fullIds = expandToComponent(participantIds, nodes, levelId)
-    const world = computeGroupBox(fullIds)
-    if (!world) return null
-    const { inverse } = levelFrame(levelId)
-    const min = world.min.clone().applyMatrix4(inverse)
-    const max = world.max.clone().applyMatrix4(inverse)
+    const plan = computeGroupPlanBox(participantIds, levelId)
+    if (!plan) return null
     return {
-      x: Math.min(min.x, max.x),
-      z: Math.min(min.z, max.z),
-      width: Math.abs(max.x - min.x),
-      depth: Math.abs(max.z - min.z),
+      x: plan.minX,
+      z: plan.minZ,
+      width: plan.maxX - plan.minX,
+      depth: plan.maxZ - plan.minZ,
     }
   }, [selectedIds, levelId, nodes, meshEpoch])
 

package/src/components/editor-2d/floorplan-registered-tool-layer.tsx

@@ -14,8 +14,19 @@ import {
 } from '../../lib/floorplan/floorplan-mode'
 import useEditor from '../../store/use-editor'
 import useFloorplanMode from '../../store/use-floorplan-mode'
+import useInteractionScope, { useReshapingNode } from '../../store/use-interaction-scope'
 
-const lazyToolCache = new WeakMap<() => Promise<unknown>, ComponentType<FloorplanToolContext>>()
+type Loader = () => Promise<{ default: ComponentType<FloorplanToolContext> }>
+const lazyToolCache = new WeakMap<Loader, ComponentType<FloorplanToolContext>>()
+
+function lazyTool(loader: Loader | undefined): ComponentType<FloorplanToolContext> | null {
+  if (!loader) return null
+  const cached = lazyToolCache.get(loader)
+  if (cached) return cached
+  const component = lazy(loader)
+  lazyToolCache.set(loader, component)
+  return component
+}
 
 function registeredFloorplanTool(
   tool: string | null,
@@ -24,13 +35,16 @@ function registeredFloorplanTool(
   if (!tool) return null
   const extension = getFloorplanNodeExtension(nodeRegistry.get(tool))
   if (!isFloorplanToolAvailableInMode(extension?.availableModes, mode)) return null
-  const loader = extension?.tool
-  if (!loader) return null
-  const cached = lazyToolCache.get(loader)
-  if (cached) return cached
-  const component = lazy(loader)
-  lazyToolCache.set(loader, component)
-  return component
+  return lazyTool(extension?.tool)
+}
+
+/** The plan sibling of `def.affordanceTools[reshape]`: a kind's layer for its own reshape. */
+function registeredReshapeLayer(
+  kind: string | null,
+  reshape: string | null,
+): ComponentType<FloorplanToolContext> | null {
+  if (!(kind && reshape)) return null
+  return lazyTool(getFloorplanNodeExtension(nodeRegistry.get(kind))?.reshapeLayers?.[reshape])
 }
 
 export function FloorplanRegisteredToolLayer() {
@@ -42,6 +56,10 @@ export function FloorplanRegisteredToolLayer() {
   const toolDefaults = useEditor((state) =>
     state.tool ? (state.toolDefaults[state.tool] ?? null) : null,
   )
+  const reshape = useInteractionScope((state) =>
+    state.scope.kind === 'reshaping' ? state.scope.reshape : null,
+  )
+  const reshapingNode = useReshapingNode()
   const activeLevelId = useViewer((state) => state.selection.levelId)
   const unit = useViewer((state) => state.unit)
   const metricNotation = useViewer((state) => state.metricNotation)
@@ -55,11 +73,14 @@ export function FloorplanRegisteredToolLayer() {
     useEditor.getState().setTool(null)
     useEditor.getState().setMode('select')
   }, [])
-  if (mode !== 'build') return null
-  const Tool = registeredToolEnabled ? registeredFloorplanTool(tool, floorplanMode) : null
-  return Tool ? (
+  const Active =
+    registeredReshapeLayer(reshapingNode?.type ?? null, reshape) ??
+    (mode === 'build' && registeredToolEnabled
+      ? registeredFloorplanTool(tool, floorplanMode)
+      : null)
+  return Active ? (
     <Suspense fallback={null}>
-      <Tool
+      <Active
         activeLevelId={activeLevelId}
         finishTool={finishTool}
         gridSnapStep={gridSnapStep}

package/src/components/editor-2d/floorplan-registry-action-menu.tsx

@@ -27,6 +27,7 @@ import {
   prepareFreshPlacementRootDuplicate,
 } from '../../lib/fresh-planar-placement'
 import { curveReshapeScope } from '../../lib/interaction/scope'
+import { duplicateWithoutMove, registryMoveDisabled } from '../../lib/node-action-movement'
 import { playBlockedQuickActionFeedback } from '../../lib/quick-action-feedback'
 import { collectQuickActionNodeScope } from '../../lib/quick-action-nodes'
 import { sfxEmitter } from '../../lib/sfx-bus'
@@ -250,7 +251,8 @@ export function FloorplanRegistryActionMenu() {
   // walls land on their bespoke `MoveWallTool` (perpendicular slide
   // with linked-wall cascade) via `affordanceTools.move`.
   const canMove =
-    !!def.capabilities.movable || !!def.floorplanMoveTarget || !!def.affordanceTools?.move
+    !registryMoveDisabled(node) &&
+    (!!def.capabilities.movable || !!def.floorplanMoveTarget || !!def.affordanceTools?.move)
   const canDuplicate = def.capabilities.duplicable !== false
   const canDelete = def.capabilities.deletable !== false
   const canAddHole = node.type === 'slab' || node.type === 'ceiling'
@@ -320,6 +322,15 @@ export function FloorplanRegistryActionMenu() {
   const handleDuplicate = () => {
     if (!node.parentId) return
     sfxEmitter.emit('sfx:item-pick')
+    if (registryMoveDisabled(node)) {
+      try {
+        const id = duplicateWithoutMove(node)
+        if (id) useViewer.getState().setSelection({ selectedIds: [id] })
+      } catch (error) {
+        console.error('Failed to duplicate node', error)
+      }
+      return
+    }
     useScene.temporal.getState().pause()
     let draftId: AnyNodeId | null = null
     try {