Add paint hover previews to viewer

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

@@ -14,6 +14,11 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
 
   const handlers = useNodeEvents(node, 'roof')
   const debugColors = useViewer((s) => s.debugColors)
+  const materialPreview = useViewer((state) =>
+    state.materialPreview?.target === 'roof' && state.materialPreview.nodeId === node.id
+      ? state.materialPreview
+      : null,
+  )
   const placeholderGeometry = useMemo(() => {
     const geometry = new THREE.BufferGeometry()
     geometry.setAttribute('position', new THREE.Float32BufferAttribute([], 3))
@@ -24,22 +29,33 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
     return geometry
   }, [])
 
-  const customMaterial = useMemo(
-    () => getRoofMaterialArray(node),
-    [
-      node.materialPreset,
-      node.material,
-      node.material?.preset,
-      node.material?.properties,
-      node.material?.texture,
-      node.topMaterial,
-      node.topMaterialPreset,
-      node.edgeMaterial,
-      node.edgeMaterialPreset,
-      node.wallMaterial,
-      node.wallMaterialPreset,
-    ],
-  )
+  const previewNode =
+    materialPreview?.role === 'top'
+      ? {
+          ...node,
+          topMaterial: materialPreview.material,
+          topMaterialPreset: materialPreview.materialPreset,
+          material: undefined,
+          materialPreset: undefined,
+        }
+      : materialPreview?.role === 'edge'
+        ? {
+            ...node,
+            edgeMaterial: materialPreview.material,
+            edgeMaterialPreset: materialPreview.materialPreset,
+            material: undefined,
+            materialPreset: undefined,
+          }
+        : materialPreview?.role === 'wall'
+          ? {
+              ...node,
+              wallMaterial: materialPreview.material,
+              wallMaterialPreset: materialPreview.materialPreset,
+              material: undefined,
+              materialPreset: undefined,
+            }
+          : node
+  const customMaterial = useMemo(() => getRoofMaterialArray(previewNode), [previewNode])
 
   const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials