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

package/src/components/tools/item/use-draft-node.test.tsx

@@ -0,0 +1,336 @@
+import { beforeEach, describe, expect, test } from 'bun:test'
+import {
+  type AnyNodeId,
+  BlockNode,
+  BuildingNode,
+  getBlockFaceFrame,
+  ItemNode,
+  LevelNode,
+  type NodeEvent,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { renderToString } from 'react-dom/server'
+import { BufferGeometry, Mesh, MeshBasicMaterial, Vector3 } from 'three'
+import { commitFaceHostClick } from './face-host-commit'
+import type { PlacementContext } from './placement-types'
+import { registerTestBlockFaceHost } from './test-face-host'
+import { type DraftNodeHandle, useDraftNode } from './use-draft-node'
+
+type RafFn = (callback: (time: number) => void) => number
+;(globalThis as { requestAnimationFrame?: RafFn }).requestAnimationFrame ??= (callback) => {
+  callback(0)
+  return 0
+}
+;(globalThis as { cancelAnimationFrame?: (id: number) => void }).cancelAnimationFrame ??= () => {}
+
+const BUILDING_ID = 'building_draft_custom_mesh'
+const LEVEL_ID = 'level_draft_custom_mesh'
+const BLOCK_ID = 'block_draft_host'
+
+let draftNode: DraftNodeHandle | null = null
+
+function DraftHarness() {
+  draftNode = useDraftNode()
+  return null
+}
+
+beforeEach(() => {
+  registerTestBlockFaceHost()
+  const block = BlockNode.parse({
+    id: BLOCK_ID,
+    parentId: LEVEL_ID,
+  })
+  const level = LevelNode.parse({
+    id: LEVEL_ID,
+    parentId: BUILDING_ID,
+    children: [BLOCK_ID],
+    level: 0,
+  })
+  const building = BuildingNode.parse({
+    id: BUILDING_ID,
+    children: [LEVEL_ID],
+  })
+  useScene.setState({
+    nodes: {
+      [BUILDING_ID]: building,
+      [LEVEL_ID]: level,
+      [BLOCK_ID]: block,
+    },
+    rootNodeIds: [BUILDING_ID],
+    collections: {},
+    dirtyNodes: new Set(),
+  } as never)
+  useScene.temporal.getState().clear()
+  useScene.temporal.getState().resume()
+  useViewer.setState({
+    selection: {
+      buildingId: BUILDING_ID,
+      levelId: LEVEL_ID,
+      zoneId: null,
+      selectedIds: [],
+    },
+  })
+  draftNode = null
+  renderToString(<DraftHarness />)
+})
+
+describe('useDraftNode block face commit', () => {
+  test('persists the face host used by the placement preview', () => {
+    const draft = draftNode!
+    draft.create(new Vector3(0, 0, 0), {
+      id: 'wall-art',
+      category: 'decor',
+      name: 'Wall art',
+      thumbnail: '/wall-art.png',
+      src: '/wall-art.glb',
+      dimensions: [1, 1, 0.1],
+      attachTo: 'wall-side',
+    })
+
+    const committedId = draft.commit({
+      parentId: BLOCK_ID,
+      position: [0.5, -0.5, 0],
+      rotation: [0, 0, 0],
+      blockFaceId: 'face-front',
+    })
+
+    const committed = useScene.getState().nodes[committedId as AnyNodeId]
+    expect(committed).toMatchObject({
+      parentId: BLOCK_ID,
+      position: [0.5, -0.5, 0],
+      blockFaceId: 'face-front',
+    })
+  })
+
+  test('keeps a block-face placement visible until undo removes the committed item', () => {
+    useScene.temporal.getState().pause()
+    const draft = draftNode!
+    const transient = draft.create(new Vector3(0, 0, 0), {
+      id: 'potted-plant',
+      category: 'decor',
+      name: 'Potted plant',
+      thumbnail: '/potted-plant.png',
+      src: '/potted-plant.glb',
+      dimensions: [0.5, 0.39, 0.5],
+    })!
+
+    const committedId = draft.commit({
+      parentId: BLOCK_ID,
+      position: [0.5, 0, 0],
+      rotation: [Math.PI / 2, 0, 0],
+      blockFaceId: 'face-top',
+    })!
+
+    const afterCommit = useScene.getState().nodes
+    expect(afterCommit[transient.id as AnyNodeId]).toBeUndefined()
+    expect(afterCommit[committedId as AnyNodeId]).toMatchObject({
+      parentId: BLOCK_ID,
+      blockFaceId: 'face-top',
+    })
+    expect((afterCommit[BLOCK_ID as AnyNodeId] as BlockNode).children).toContain(
+      committedId as ItemNode['id'],
+    )
+
+    useScene.temporal.getState().undo()
+
+    const afterUndo = useScene.getState().nodes
+    expect(afterUndo[committedId as AnyNodeId]).toBeUndefined()
+    expect(afterUndo[transient.id as AnyNodeId]).toBeUndefined()
+    expect((afterUndo[BLOCK_ID as AnyNodeId] as BlockNode).children).not.toContain(
+      committedId as ItemNode['id'],
+    )
+  })
+
+  test('moves a block-face item to the floor as one undoable reparent', () => {
+    const hosted = ItemNode.parse({
+      id: 'item_hosted-potted-plant',
+      parentId: BLOCK_ID,
+      asset: {
+        id: 'potted-plant',
+        category: 'decor',
+        name: 'Potted plant',
+        thumbnail: '/potted-plant.png',
+        src: '/potted-plant.glb',
+        dimensions: [0.5, 0.39, 0.5],
+      },
+      position: [0.5, 0, 0],
+      rotation: [Math.PI / 2, 0, 0],
+      blockFaceId: 'face-top',
+    })
+    useScene.getState().createNode(hosted, BLOCK_ID as AnyNodeId)
+    useScene.temporal.getState().clear()
+    useScene.temporal.getState().pause()
+
+    const draft = draftNode!
+    draft.adopt(hosted)
+    draft.commit({
+      parentId: LEVEL_ID,
+      position: [2, 0, 3],
+      rotation: [0, Math.PI / 4, 0],
+      blockFaceId: undefined,
+    })
+
+    expect(useScene.getState().nodes[hosted.id as AnyNodeId]).toMatchObject({
+      parentId: LEVEL_ID,
+      position: [2, 0, 3],
+      rotation: [0, Math.PI / 4, 0],
+    })
+    expect(
+      (useScene.getState().nodes[hosted.id as AnyNodeId] as ItemNode).blockFaceId,
+    ).toBeUndefined()
+    expect((useScene.getState().nodes[BLOCK_ID as AnyNodeId] as BlockNode).children).not.toContain(
+      hosted.id,
+    )
+    expect((useScene.getState().nodes[LEVEL_ID as AnyNodeId] as LevelNode).children).toContain(
+      hosted.id,
+    )
+
+    useScene.temporal.getState().undo()
+
+    expect(useScene.getState().nodes[hosted.id as AnyNodeId]).toMatchObject({
+      parentId: BLOCK_ID,
+      position: [0.5, 0, 0],
+      rotation: [Math.PI / 2, 0, 0],
+      blockFaceId: 'face-top',
+    })
+    expect((useScene.getState().nodes[BLOCK_ID as AnyNodeId] as BlockNode).children).toContain(
+      hosted.id,
+    )
+    expect((useScene.getState().nodes[LEVEL_ID as AnyNodeId] as LevelNode).children).not.toContain(
+      hosted.id,
+    )
+  })
+
+  test('keeps a hosted item visible through a block topology edit and its undo', () => {
+    useScene.temporal.getState().pause()
+    const draft = draftNode!
+    draft.create(new Vector3(0, 0, 0), {
+      id: 'potted-plant',
+      category: 'decor',
+      name: 'Potted plant',
+      thumbnail: '/potted-plant.png',
+      src: '/potted-plant.glb',
+      dimensions: [0.5, 0.39, 0.5],
+    })
+    const committedId = draft.commit({
+      parentId: BLOCK_ID,
+      position: [0, 0, 0],
+      rotation: [Math.PI / 2, 0, 0],
+      blockFaceId: 'f-top',
+    })!
+
+    const beforeEdit = useScene.getState().nodes[BLOCK_ID as AnyNodeId] as BlockNode
+    const topVertexIds = new Set(
+      beforeEdit.topology.faces.find((face) => face.id === 'f-top')?.vertexIds ?? [],
+    )
+    const editedTopology = {
+      ...beforeEdit.topology,
+      vertices: beforeEdit.topology.vertices.map((vertex) =>
+        topVertexIds.has(vertex.id)
+          ? {
+              ...vertex,
+              position: [vertex.position[0], vertex.position[1] + 0.5, vertex.position[2]] as [
+                number,
+                number,
+                number,
+              ],
+            }
+          : vertex,
+      ),
+    }
+
+    useScene.temporal.getState().resume()
+    useScene.getState().updateNode(BLOCK_ID as AnyNodeId, { topology: editedTopology })
+    useScene.temporal.getState().pause()
+
+    const afterEdit = useScene.getState().nodes
+    const editedHost = afterEdit[BLOCK_ID as AnyNodeId] as BlockNode
+    expect(editedHost.children).toContain(committedId as ItemNode['id'])
+    expect(afterEdit[committedId as AnyNodeId]).toMatchObject({
+      parentId: BLOCK_ID,
+      blockFaceId: 'f-top',
+    })
+    expect(getBlockFaceFrame(editedHost.topology, 'f-top')?.origin[1]).toBe(2.9)
+
+    useScene.temporal.getState().undo()
+
+    const afterUndo = useScene.getState().nodes
+    const restoredHost = afterUndo[BLOCK_ID as AnyNodeId] as BlockNode
+    expect(restoredHost.children).toContain(committedId as ItemNode['id'])
+    expect(afterUndo[committedId as AnyNodeId]).toMatchObject({
+      parentId: BLOCK_ID,
+      blockFaceId: 'f-top',
+    })
+    expect(getBlockFaceFrame(restoredHost.topology, 'f-top')?.origin[1]).toBe(2.4)
+  })
+
+  test('commits before a stop-propagation leave can destroy the block-face draft', () => {
+    useScene.temporal.getState().pause()
+    const draft = draftNode!
+    const transient = draft.create(new Vector3(), {
+      id: 'potted-plant',
+      category: 'decor',
+      name: 'Potted plant',
+      thumbnail: '/potted-plant.png',
+      src: '/potted-plant.glb',
+      dimensions: [0.5, 0.39, 0.5],
+    })!
+    Object.assign(transient, {
+      parentId: BLOCK_ID,
+      position: [0, 0, 0],
+      rotation: [Math.PI / 2, 0, 0],
+      blockFaceId: 'f-top',
+    })
+    useScene.getState().updateNode(transient.id, transient)
+
+    const host = useScene.getState().nodes[BLOCK_ID as AnyNodeId] as BlockNode
+    const geometry = new BufferGeometry()
+    geometry.userData.blockFaces = [{ faceId: 'f-top', start: 0, count: 6 }]
+    const object = new Mesh(geometry, new MeshBasicMaterial())
+    object.updateMatrixWorld(true)
+    const event: NodeEvent = {
+      node: host,
+      object,
+      faceIndex: 0,
+      position: [0, 2.4, 0],
+      localPosition: [0, 2.4, 0],
+      normal: [0, 1, 0],
+      stopPropagation: () => draft.destroy(),
+      nativeEvent: {} as NodeEvent['nativeEvent'],
+    }
+    const getContext = (): PlacementContext => ({
+      asset: transient.asset,
+      levelId: LEVEL_ID,
+      draftItem: draft.current,
+      gridPosition: new Vector3(),
+      state: {
+        surface: 'block-face',
+        blockId: BLOCK_ID,
+        wallId: null,
+        roofSegmentId: null,
+        ceilingId: null,
+        surfaceItemId: null,
+        shelfId: null,
+      },
+      currentCursorRotationY: 0,
+    })
+
+    const outcome = commitFaceHostClick({
+      getContext,
+      event,
+      enterFaceHost: () => false,
+      commitDraft: (nodeUpdate) => ({
+        committedId: draft.commit(nodeUpdate),
+        wasAdopted: draft.isAdopted,
+      }),
+    })
+
+    expect(outcome?.committedId).not.toBeNull()
+    expect(useScene.getState().nodes[outcome!.committedId as AnyNodeId]).toMatchObject({
+      parentId: BLOCK_ID,
+      blockFaceId: 'f-top',
+      metadata: {},
+    })
+  })
+})

package/src/components/tools/item/use-draft-node.ts

@@ -6,13 +6,20 @@ import {
   sceneRegistry,
   useScene,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { beginPerfAction, commitPerfAction, useViewer } from '@pascal-app/viewer'
 import { useCallback, useMemo, useRef } from 'react'
 import type { Vector3 } from 'three'
+import {
+  surfaceAttachmentId,
+  surfaceAttachmentUpdates,
+  surfaceFramePose,
+  updateSurfaceNode,
+} from '../../../lib/surface-attachment'
 import usePlacementPreview from '../../../store/use-placement-preview'
 import { stripTransient } from './placement-math'
 
 interface OriginalState {
+  surfaceId: string | null
   position: [number, number, number]
   rotation: [number, number, number]
   side: ItemNode['side']
@@ -21,10 +28,12 @@ interface OriginalState {
   // mid-move, so reverts must restore it alongside parentId.
   roofSegmentId: ItemNode['roofSegmentId']
   roofFace: ItemNode['roofFace']
+  blockFaceId: ItemNode['blockFaceId']
   metadata: ItemNode['metadata']
 }
 
 export interface DraftNodeHandle {
+  updateSurface: (data: Partial<ItemNode>, surfaceId: string | null) => void
   /** Current draft item, or null */
   readonly current: ItemNode | null
   /** Whether the current draft was adopted (move mode) vs created (create mode) */
@@ -46,7 +55,11 @@ export interface DraftNodeHandle {
    *  commit lands on the surface the cursor pointed at. */
   commit: (
     finalUpdate: Partial<ItemNode>,
-    options?: { supportElevationCap?: number | null },
+    options?: {
+      supportElevationCap?: number | null
+      preferredSupportSlabId?: string | null
+      pinSupport?: boolean
+    },
   ) => string | null
   /** Destroy the current draft. Create mode: delete node. Move mode: restore original state. */
   destroy: () => void
@@ -107,16 +120,21 @@ export function useDraftNode(): DraftNodeHandle {
         : {}
 
     originalStateRef.current = {
+      surfaceId: surfaceAttachmentId(node),
       position: [...node.position] as [number, number, number],
       rotation: [...node.rotation] as [number, number, number],
       side: node.side,
       parentId: node.parentId,
       roofSegmentId: node.roofSegmentId,
       roofFace: node.roofFace,
+      blockFaceId: node.blockFaceId,
       metadata: node.metadata,
     }
 
-    draftRef.current = node
+    draftRef.current = {
+      ...node,
+      ...surfaceFramePose(node.parentId, surfaceAttachmentId(node), node, false),
+    }
     adoptedRef.current = true
 
     // Mark as transient so it renders as a draft
@@ -134,11 +152,23 @@ export function useDraftNode(): DraftNodeHandle {
   const commit = useCallback(
     (
       finalUpdate: Partial<ItemNode>,
-      options?: { supportElevationCap?: number | null },
+      options?: {
+        supportElevationCap?: number | null
+        preferredSupportSlabId?: string | null
+        pinSupport?: boolean
+      },
     ): string | null => {
       const draft = draftRef.current
       if (!draft) return null
 
+      const surfaceId = surfaceAttachmentId(useScene.getState().nodes[draft.id] ?? draft)
+      const stored = surfaceFramePose(
+        finalUpdate.parentId ?? draft.parentId,
+        surfaceId,
+        { ...draft, ...finalUpdate },
+        true,
+      )
+      finalUpdate = { ...finalUpdate, ...stored }
       if (adoptedRef.current) {
         // Move mode: update in place (single undoable action)
         const { parentId: newParentId, ...updateProps } = finalUpdate
@@ -149,15 +179,20 @@ export function useDraftNode(): DraftNodeHandle {
         const original = originalStateRef.current!
 
         // Restore original state while paused — so the undo baseline is clean
-        useScene.getState().updateNode(draft.id, {
-          position: original.position,
-          rotation: original.rotation,
-          side: original.side,
-          parentId: original.parentId,
-          roofSegmentId: original.roofSegmentId,
-          roofFace: original.roofFace,
-          metadata: original.metadata,
-        })
+        updateSurfaceNode(
+          draft.id,
+          {
+            position: original.position,
+            rotation: original.rotation,
+            side: original.side,
+            parentId: original.parentId,
+            roofSegmentId: original.roofSegmentId,
+            roofFace: original.roofFace,
+            blockFaceId: original.blockFaceId,
+            metadata: original.metadata,
+          },
+          original.surfaceId,
+        )
 
         // Resume → tracked update (undo reverts to original)
         useScene.temporal.getState().resume()
@@ -169,25 +204,32 @@ export function useDraftNode(): DraftNodeHandle {
           metadata: updateProps.metadata ?? stripTransient(draft.metadata),
         })
 
-        useScene.getState().updateNode(draft.id, {
-          position: updateProps.position ?? draft.position,
-          rotation: updateProps.rotation ?? draft.rotation,
-          side: updateProps.side ?? draft.side,
-          metadata: updateProps.metadata ?? stripTransient(draft.metadata),
-          parentId: parentId as string,
-          // Forward the roof host explicitly: strategies set it on every
-          // commit (segment id on a roof face, undefined elsewhere), and
-          // dropping it here strands the item in the roof frame without
-          // the segment transform.
-          roofSegmentId: updateProps.roofSegmentId,
-          roofFace: updateProps.roofFace,
-          // Only when the strategy decided about wallId (roof commits clear
-          // it) — floor/ceiling commits never managed the field.
-          ...('wallId' in updateProps ? { wallId: updateProps.wallId } : {}),
-          ...resolveSupportSlabPatch(effectiveNode, useScene.getState().nodes, {
-            maxElevation: options?.supportElevationCap,
-          }),
-        })
+        updateSurfaceNode(
+          draft.id,
+          {
+            position: updateProps.position ?? draft.position,
+            rotation: updateProps.rotation ?? draft.rotation,
+            side: updateProps.side ?? draft.side,
+            metadata: updateProps.metadata ?? stripTransient(draft.metadata),
+            parentId: parentId as string,
+            // Forward the roof host explicitly: strategies set it on every
+            // commit (segment id on a roof face, undefined elsewhere), and
+            // dropping it here strands the item in the roof frame without
+            // the segment transform.
+            roofSegmentId: updateProps.roofSegmentId,
+            roofFace: updateProps.roofFace,
+            blockFaceId: updateProps.blockFaceId,
+            // Only when the strategy decided about wallId (roof commits clear
+            // it) — floor/ceiling commits never managed the field.
+            ...('wallId' in updateProps ? { wallId: updateProps.wallId } : {}),
+            ...resolveSupportSlabPatch(effectiveNode, useScene.getState().nodes, {
+              maxElevation: options?.supportElevationCap,
+              preferredSlabId: options?.preferredSupportSlabId,
+              pinSupport: options?.pinSupport,
+            }),
+          },
+          surfaceId,
+        )
 
         useScene.temporal.getState().pause()
 
@@ -206,7 +248,9 @@ export function useDraftNode(): DraftNodeHandle {
       const parentId = (newParentId ?? useViewer.getState().selection.levelId) as AnyNodeId
       if (!parentId) return null
 
+      beginPerfAction('place:item', draft.id)
       // Delete draft while paused (invisible to undo)
+      updateSurfaceNode(draft.id, {}, null)
       useScene.getState().deleteNode(draft.id)
       draftRef.current = null
 
@@ -226,6 +270,7 @@ export function useDraftNode(): DraftNodeHandle {
         // forwarded explicitly.
         roofSegmentId: updateProps.roofSegmentId,
         roofFace: updateProps.roofFace,
+        blockFaceId: updateProps.blockFaceId,
         ...('wallId' in updateProps ? { wallId: updateProps.wallId } : {}),
         metadata: updateProps.metadata ?? stripTransient(draft.metadata),
         parentId,
@@ -236,10 +281,17 @@ export function useDraftNode(): DraftNodeHandle {
         ...resolveSupportSlabPatch(
           finalNode,
           { ...nodes, [finalNode.id]: finalNode },
-          { maxElevation: options?.supportElevationCap },
+          {
+            maxElevation: options?.supportElevationCap,
+            preferredSlabId: options?.preferredSupportSlabId,
+            pinSupport: options?.pinSupport,
+          },
         ),
       })
-      useScene.getState().createNode(committedNode, parentId)
+      useScene.getState().applyNodeChanges({
+        create: [{ node: committedNode, parentId }],
+        update: surfaceAttachmentUpdates(committedNode.id, parentId, surfaceId),
+      })
       if (usePlacementPreview.getState().node?.id === draft.id) {
         usePlacementPreview.getState().clear()
       }
@@ -249,6 +301,7 @@ export function useDraftNode(): DraftNodeHandle {
 
       adoptedRef.current = false
       originalStateRef.current = null
+      commitPerfAction()
       return committedNode.id
     },
     [],
@@ -272,6 +325,7 @@ export function useDraftNode(): DraftNodeHandle {
       const live = useScene.getState().nodes[id as AnyNodeId] as ItemNode | undefined
       const livePosition = live?.position
       const externallyMoved =
+        !live?.metadata?.isTransient &&
         !!livePosition &&
         (livePosition[0] !== original.position[0] ||
           livePosition[1] !== original.position[1] ||
@@ -286,15 +340,20 @@ export function useDraftNode(): DraftNodeHandle {
         return
       }
 
-      useScene.getState().updateNode(id, {
-        position: original.position,
-        rotation: original.rotation,
-        side: original.side,
-        parentId: original.parentId,
-        roofSegmentId: original.roofSegmentId,
-        roofFace: original.roofFace,
-        metadata: original.metadata,
-      })
+      updateSurfaceNode(
+        id,
+        {
+          position: original.position,
+          rotation: original.rotation,
+          side: original.side,
+          parentId: original.parentId,
+          roofSegmentId: original.roofSegmentId,
+          roofFace: original.roofFace,
+          blockFaceId: original.blockFaceId,
+          metadata: original.metadata,
+        },
+        original.surfaceId,
+      )
 
       // Also reset the Three.js mesh directly — the store update triggers a React
       // re-render but the mesh position was mutated by useFrame and may not reset
@@ -307,6 +366,7 @@ export function useDraftNode(): DraftNodeHandle {
       }
     } else {
       // Create mode: delete the transient node
+      updateSurfaceNode(draftRef.current.id, {}, null)
       useScene.getState().deleteNode(draftRef.current.id)
     }
 
@@ -318,6 +378,17 @@ export function useDraftNode(): DraftNodeHandle {
     }
   }, [])
 
+  const updateSurface = useCallback((data: Partial<ItemNode>, surfaceId: string | null) => {
+    const draft = draftRef.current
+    if (!draft) return
+    const pose = { ...draft, ...data }
+    updateSurfaceNode(
+      draft.id,
+      { ...data, ...surfaceFramePose(pose.parentId, surfaceId, pose, true) },
+      surfaceId,
+    )
+  }, [])
+
   return useMemo(
     () => ({
       get current() {
@@ -326,11 +397,12 @@ export function useDraftNode(): DraftNodeHandle {
       get isAdopted() {
         return adoptedRef.current
       },
+      updateSurface,
       create,
       adopt,
       commit,
       destroy,
     }),
-    [create, adopt, commit, destroy],
+    [create, adopt, commit, destroy, updateSurface],
   )
 }