feat: Add catalog-based material presets across structural nodes (#231)

* Add catalog-based material presets across structural nodes

* Fix material picker fallback and wall visible highlights

* Preserve wall materials in selection highlights

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

@@ -1,4 +1,4 @@
-import { type CeilingNode, resolveMaterial, useRegistry } from '@pascal-app/core'
+import { type CeilingNode, getMaterialPresetByRef, resolveMaterial, useRegistry } from '@pascal-app/core'
 import { useMemo, useRef } from 'react'
 import { float, mix, positionWorld, smoothstep } from 'three/tsl'
 import { BackSide, FrontSide, type Mesh, MeshBasicNodeMaterial } from 'three/webgpu'
@@ -39,10 +39,11 @@ export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
   const handlers = useNodeEvents(node, 'ceiling')
 
   const materials = useMemo(() => {
-    const props = resolveMaterial(node.material)
+    const preset = getMaterialPresetByRef(node.materialPreset)
+    const props = preset?.mapProperties ?? resolveMaterial(node.material)
     const color = props.color || '#999999'
     return createCeilingMaterials(color)
-  }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
+  }, [node.materialPreset, node.material, node.material?.preset, node.material?.properties, node.material?.texture])
 
   return (
     <mesh material={materials.bottomMaterial} ref={ref}>

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

@@ -2,12 +2,28 @@ import { type FenceNode, useRegistry, useScene } from '@pascal-app/core'
 import { useLayoutEffect, useMemo, useRef } from 'react'
 import type { Mesh } from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
-import { DEFAULT_STAIR_MATERIAL } from '../../../lib/materials'
+import {
+  createMaterial,
+  createMaterialFromPresetRef,
+  DEFAULT_STAIR_MATERIAL,
+} from '../../../lib/materials'
 
 export const FenceRenderer = ({ node }: { node: FenceNode }) => {
   const ref = useRef<Mesh>(null!)
   const handlers = useNodeEvents(node, 'fence')
-  const material = useMemo(() => DEFAULT_STAIR_MATERIAL, [])
+  const material = useMemo(() => {
+    const presetMaterial = createMaterialFromPresetRef(node.materialPreset)
+    if (presetMaterial) return presetMaterial
+    const mat = node.material
+    if (!mat) return DEFAULT_STAIR_MATERIAL
+    return createMaterial(mat)
+  }, [
+    node.materialPreset,
+    node.material,
+    node.material?.preset,
+    node.material?.properties,
+    node.material?.texture,
+  ])
 
   useRegistry(node.id, 'fence', ref)
   useLayoutEffect(() => {

packages/viewer/src/components/renderers/roof-segment/roof-segment-renderer.tsx

@@ -1,24 +1,43 @@
-import { type RoofSegmentNode, useRegistry } from '@pascal-app/core'
+import { type AnyNodeId, type RoofNode, type RoofSegmentNode, useRegistry, useScene } from '@pascal-app/core'
 import { useMemo, useRef } from 'react'
 import type * as THREE from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
-import { createMaterial } from '../../../lib/materials'
+import { createMaterial, createMaterialFromPresetRef } from '../../../lib/materials'
 import useViewer from '../../../store/use-viewer'
 import { roofDebugMaterials, roofMaterials } from '../roof/roof-materials'
 
 export const RoofSegmentRenderer = ({ node }: { node: RoofSegmentNode }) => {
   const ref = useRef<THREE.Mesh>(null!)
+  const nodes = useScene((state) => state.nodes)
 
   useRegistry(node.id, 'roof-segment', ref)
 
   const handlers = useNodeEvents(node, 'roof-segment')
   const debugColors = useViewer((s) => s.debugColors)
+  const parentNode =
+    node.parentId ? (nodes[node.parentId as AnyNodeId] as RoofNode | undefined) : undefined
 
   const customMaterial = useMemo(() => {
-    const mat = node.material
+    const effectiveMaterialPreset = node.materialPreset ?? parentNode?.materialPreset
+    const effectiveMaterial = node.material ?? parentNode?.material
+
+    const presetMaterial = createMaterialFromPresetRef(effectiveMaterialPreset)
+    if (presetMaterial) return presetMaterial
+    const mat = effectiveMaterial
     if (!mat) return null
     return createMaterial(mat)
-  }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
+  }, [
+    node.materialPreset,
+    node.material,
+    node.material?.preset,
+    node.material?.properties,
+    node.material?.texture,
+    parentNode?.materialPreset,
+    parentNode?.material,
+    parentNode?.material?.preset,
+    parentNode?.material?.properties,
+    parentNode?.material?.texture,
+  ])
 
   const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials
 

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

@@ -2,7 +2,7 @@ import { type RoofNode, useRegistry } from '@pascal-app/core'
 import { useMemo, useRef } from 'react'
 import type * as THREE from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
-import { createMaterial } from '../../../lib/materials'
+import { createMaterial, createMaterialFromPresetRef } from '../../../lib/materials'
 import useViewer from '../../../store/use-viewer'
 import { NodeRenderer } from '../node-renderer'
 import { roofDebugMaterials, roofMaterials } from './roof-materials'
@@ -16,10 +16,12 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
   const debugColors = useViewer((s) => s.debugColors)
 
   const customMaterial = useMemo(() => {
+    const presetMaterial = createMaterialFromPresetRef(node.materialPreset)
+    if (presetMaterial) return presetMaterial
     const mat = node.material
     if (!mat) return null
     return createMaterial(mat)
-  }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
+  }, [node.materialPreset, node.material, node.material?.preset, node.material?.properties, node.material?.texture])
 
   const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials
 

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

@@ -2,7 +2,11 @@ import { type SlabNode, useRegistry } from '@pascal-app/core'
 import { useMemo, useRef } from 'react'
 import type { Mesh } from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
-import { createMaterial, DEFAULT_SLAB_MATERIAL } from '../../../lib/materials'
+import {
+  createMaterial,
+  createMaterialFromPresetRef,
+  DEFAULT_SLAB_MATERIAL,
+} from '../../../lib/materials'
 
 export const SlabRenderer = ({ node }: { node: SlabNode }) => {
   const ref = useRef<Mesh>(null!)
@@ -12,10 +16,18 @@ export const SlabRenderer = ({ node }: { node: SlabNode }) => {
   const handlers = useNodeEvents(node, 'slab')
 
   const material = useMemo(() => {
+    const presetMaterial = createMaterialFromPresetRef(node.materialPreset)
+    if (presetMaterial) return presetMaterial
     const mat = node.material
     if (!mat) return DEFAULT_SLAB_MATERIAL
     return createMaterial(mat)
-  }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
+  }, [
+    node.material,
+    node.material?.preset,
+    node.material?.properties,
+    node.material?.texture,
+    node.materialPreset,
+  ])
 
   return (
     <mesh

packages/viewer/src/components/renderers/stair-segment/stair-segment-renderer.tsx

@@ -1,11 +1,12 @@
-import { type StairSegmentNode, useRegistry, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type StairNode, type StairSegmentNode, useRegistry, useScene } from '@pascal-app/core'
 import { useLayoutEffect, useMemo, useRef } from 'react'
 import type * as THREE from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
-import { createMaterial, DEFAULT_STAIR_MATERIAL } from '../../../lib/materials'
+import { createMaterial, createMaterialFromPresetRef, DEFAULT_STAIR_MATERIAL } from '../../../lib/materials'
 
 export const StairSegmentRenderer = ({ node }: { node: StairSegmentNode }) => {
   const ref = useRef<THREE.Mesh>(null!)
+  const nodes = useScene((state) => state.nodes)
 
   useRegistry(node.id, 'stair-segment', ref)
 
@@ -14,12 +15,30 @@ export const StairSegmentRenderer = ({ node }: { node: StairSegmentNode }) => {
   }, [node.id])
 
   const handlers = useNodeEvents(node, 'stair-segment')
+  const parentNode =
+    node.parentId ? (nodes[node.parentId as AnyNodeId] as StairNode | undefined) : undefined
 
   const material = useMemo(() => {
-    const mat = node.material
+    const effectiveMaterialPreset = node.materialPreset ?? parentNode?.materialPreset
+    const effectiveMaterial = node.material ?? parentNode?.material
+
+    const presetMaterial = createMaterialFromPresetRef(effectiveMaterialPreset)
+    if (presetMaterial) return presetMaterial
+    const mat = effectiveMaterial
     if (!mat) return DEFAULT_STAIR_MATERIAL
     return createMaterial(mat)
-  }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
+  }, [
+    node.materialPreset,
+    node.material,
+    node.material?.preset,
+    node.material?.properties,
+    node.material?.texture,
+    parentNode?.materialPreset,
+    parentNode?.material,
+    parentNode?.material?.preset,
+    parentNode?.material?.properties,
+    parentNode?.material?.texture,
+  ])
 
   return (
     <mesh

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

@@ -2,7 +2,7 @@ import { type AnyNodeId, type StairNode, type StairSegmentNode, useRegistry, use
 import { useLayoutEffect, useMemo, useRef } from 'react'
 import * as THREE from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
-import { createMaterial, DEFAULT_STAIR_MATERIAL } from '../../../lib/materials'
+import { createMaterial, createMaterialFromPresetRef, DEFAULT_STAIR_MATERIAL } from '../../../lib/materials'
 import { NodeRenderer } from '../node-renderer'
 
 type SegmentTransform = {
@@ -47,10 +47,12 @@ export const StairRenderer = ({ node }: { node: StairNode }) => {
   const handlers = useNodeEvents(node, 'stair')
 
   const material = useMemo(() => {
+    const presetMaterial = createMaterialFromPresetRef(node.materialPreset)
+    if (presetMaterial) return presetMaterial
     const mat = node.material
     if (!mat) return DEFAULT_STAIR_MATERIAL
     return createMaterial(mat)
-  }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
+  }, [node.materialPreset, node.material, node.material?.preset, node.material?.properties, node.material?.texture])
 
   return (
     <group

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

@@ -2,7 +2,11 @@ import { useRegistry, useScene, type WallNode } from '@pascal-app/core'
 import { useLayoutEffect, useMemo, useRef } from 'react'
 import type { Mesh } from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
-import { createMaterial, DEFAULT_WALL_MATERIAL } from '../../../lib/materials'
+import {
+  createMaterial,
+  createMaterialFromPresetRef,
+  DEFAULT_WALL_MATERIAL,
+} from '../../../lib/materials'
 import { NodeRenderer } from '../node-renderer'
 
 export const WallRenderer = ({ node }: { node: WallNode }) => {
@@ -17,10 +21,18 @@ export const WallRenderer = ({ node }: { node: WallNode }) => {
   const handlers = useNodeEvents(node, 'wall')
 
   const material = useMemo(() => {
+    const presetMaterial = createMaterialFromPresetRef(node.materialPreset)
+    if (presetMaterial) return presetMaterial
     const mat = node.material
     if (!mat) return DEFAULT_WALL_MATERIAL
     return createMaterial(mat)
-  }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
+  }, [
+    node.material,
+    node.material?.preset,
+    node.material?.properties,
+    node.material?.texture,
+    node.materialPreset,
+  ])
 
   return (
     <mesh castShadow material={material} receiveShadow ref={ref} visible={node.visible}>

packages/viewer/src/components/viewer/post-processing.tsx

@@ -310,6 +310,10 @@ const PostProcessingPasses = () => {
     bgCurrent.current.lerp(bgTarget.current, Math.min(delta, 0.1) * 4)
     bgUniform.current.value.copy(bgCurrent.current)
 
+    if (!isInitialized) {
+      return
+    }
+
     if (hasPipelineErrorRef.current || !renderPipelineRef.current) {
       try {
         if ((renderer as any).setClearAlpha) {

packages/viewer/src/components/viewer/selection-manager.tsx

@@ -281,6 +281,10 @@ export const SelectionManager = () => {
       if (!strategy) return
       if (strategy.isValid(event.node)) {
         event.stopPropagation()
+        if (event.node.type === 'slab') {
+          useViewer.setState({ hoveredId: null })
+          return
+        }
         useViewer.setState({ hoveredId: event.node.id })
       }
     }
@@ -388,11 +392,14 @@ const OutlinerSync = () => {
   const selection = useViewer((s) => s.selection)
   const hoveredId = useViewer((s) => s.hoveredId)
   const outliner = useViewer((s) => s.outliner)
+  const nodes = useScene((s) => s.nodes)
 
   useEffect(() => {
     // Sync selected objects
     outliner.selectedObjects.length = 0
     for (const id of selection.selectedIds) {
+      const node = nodes[id as AnyNodeId]
+      if (node?.type === 'slab') continue
       const obj = sceneRegistry.nodes.get(id)
       if (obj) outliner.selectedObjects.push(obj)
     }
@@ -400,10 +407,12 @@ const OutlinerSync = () => {
     // Sync hovered objects
     outliner.hoveredObjects.length = 0
     if (hoveredId) {
+      const hoveredNode = nodes[hoveredId as AnyNodeId]
+      if (hoveredNode?.type === 'slab') return
       const obj = sceneRegistry.nodes.get(hoveredId)
       if (obj) outliner.hoveredObjects.push(obj)
     }
-  }, [selection, hoveredId, outliner])
+  }, [selection, hoveredId, outliner, nodes])
 
   return null
 }