Refine wall move previews and expose auto-slab planning

packages/viewer/src/components/renderers/ceiling/ceiling-renderer.tsx

@@ -4,12 +4,19 @@ import {
   resolveMaterial,
   useRegistry,
 } from '@pascal-app/core'
-import { useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
+import { BufferGeometry, Float32BufferAttribute } from 'three'
 import { float, mix, positionWorld, smoothstep } from 'three/tsl'
 import { BackSide, FrontSide, type Mesh, MeshBasicNodeMaterial } from 'three/webgpu'
 import { useNodeEvents } from '../../../hooks/use-node-events'
 import { NodeRenderer } from '../node-renderer'
 
+function createEmptyGeometry() {
+  const geometry = new BufferGeometry()
+  geometry.setAttribute('position', new Float32BufferAttribute([], 3))
+  return geometry
+}
+
 const gridScale = 5
 const gridX = positionWorld.x.mul(gridScale).fract()
 const gridY = positionWorld.z.mul(gridScale).fract()
@@ -51,10 +58,20 @@ function getCeilingMaterials(color = '#999999') {
 
 export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
   const ref = useRef<Mesh>(null!)
+  const placeholderGeometry = useMemo(createEmptyGeometry, [])
+  const gridPlaceholderGeometry = useMemo(createEmptyGeometry, [])
 
   useRegistry(node.id, 'ceiling', ref)
   const handlers = useNodeEvents(node, 'ceiling')
 
+  useEffect(
+    () => () => {
+      placeholderGeometry.dispose()
+      gridPlaceholderGeometry.dispose()
+    },
+    [gridPlaceholderGeometry, placeholderGeometry],
+  )
+
   const materials = useMemo(() => {
     const preset = getMaterialPresetByRef(node.materialPreset)
     const props = preset?.mapProperties ?? resolveMaterial(node.material)
@@ -69,17 +86,15 @@ export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
   ])
 
   return (
-    <mesh material={materials.bottomMaterial} ref={ref}>
-      <boxGeometry args={[0, 0, 0]} />
+    <mesh geometry={placeholderGeometry} material={materials.bottomMaterial} ref={ref}>
       <mesh
+        geometry={gridPlaceholderGeometry}
         material={materials.topMaterial}
         name="ceiling-grid"
         {...handlers}
         scale={0}
         visible={false}
-      >
-        <boxGeometry args={[0, 0, 0]} />
-      </mesh>
+      />
       {node.children.map((childId) => (
         <NodeRenderer key={childId} nodeId={childId} />
       ))}

packages/viewer/src/components/renderers/slab/slab-renderer.tsx

@@ -11,6 +11,12 @@ import {
 
 const slabMaterialCache = new Map<string, THREE.MeshStandardMaterial>()
 
+function createEmptyGeometry() {
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.Float32BufferAttribute([], 3))
+  return geometry
+}
+
 function getSlabMaterial(
   cacheKey: string,
   params: { material?: SlabNode['material']; materialPreset?: string },
@@ -47,11 +53,14 @@ function getSlabMaterial(
 
 export const SlabRenderer = ({ node }: { node: SlabNode }) => {
   const ref = useRef<Mesh>(null!)
+  const placeholderGeometry = useMemo(createEmptyGeometry, [])
 
   useRegistry(node.id, 'slab', ref)
 
   const handlers = useNodeEvents(node, 'slab')
 
+  useEffect(() => () => placeholderGeometry.dispose(), [placeholderGeometry])
+
   const material = useMemo(() => {
     const resolvedMaterial = node.material
     const resolvedMaterialPreset = node.materialPreset
@@ -75,13 +84,12 @@ export const SlabRenderer = ({ node }: { node: SlabNode }) => {
   return (
     <mesh
       castShadow
+      geometry={placeholderGeometry}
       receiveShadow
       ref={ref}
       {...handlers}
       material={material}
       visible={node.visible}
-    >
-      <boxGeometry args={[0, 0, 0]} />
-    </mesh>
+    />
   )
 }