@pascal-app/editor 0.6.0 → 0.8.0

package/src/components/editor/selection-manager.tsx

@@ -2,27 +2,57 @@ import {
   type AnyNode,
   type AnyNodeId,
   type BuildingNode,
+  type CeilingNode,
+  type ColumnNode,
   emitter,
+  type FenceNode,
+  getMaterialPresetByRef,
   type ItemNode,
   type NodeEvent,
   type RoofEvent,
+  type RoofNode,
   type RoofSegmentEvent,
   resolveLevelId,
-  sceneRegistry,
+  resolveMaterial,
+  type SlabNode,
   type StairEvent,
   type StairNode,
-  type StairSurfaceMaterialRole,
   type StairSegmentEvent,
+  type StairSurfaceMaterialRole,
+  sceneRegistry,
   useScene,
   type WallEvent,
+  type WallNode,
   type WallSurfaceSide,
 } from '@pascal-app/core'
 
-import { useViewer } from '@pascal-app/viewer'
+import {
+  applyMaterialPresetToMaterials,
+  createMaterial,
+  createMaterialFromPresetRef,
+  getRoofMaterialArray,
+  getStairBodyMaterials,
+  getStairRailingMaterial,
+  getVisibleWallMaterials,
+  useViewer,
+} from '@pascal-app/viewer'
 import { useCallback, useEffect, useRef } from 'react'
-import { Color, type BufferGeometry, type Material, type Mesh, type Object3D } from 'three'
+import { type BufferGeometry, Color, type Material, type Mesh, type Object3D } from 'three'
+import {
+  type ActivePaintMaterial,
+  buildRoofSurfaceMaterialPatch,
+  buildSingleSurfaceMaterialPatch,
+  buildStairSurfaceMaterialPatch,
+  buildWallSurfaceMaterialPatch,
+  hasActivePaintMaterial,
+  resolveActivePaintMaterialFromSelection,
+} from '../../lib/material-paint'
 import { sfxEmitter } from '../../lib/sfx-bus'
-import useEditor, { type MaterialTargetRole, type Phase, type StructureLayer } from './../../store/use-editor'
+import useEditor, {
+  type MaterialTargetRole,
+  type Phase,
+  type StructureLayer,
+} from './../../store/use-editor'
 import { boxSelectHandled } from '../tools/select/box-select-tool'
 
 const isNodeInCurrentLevel = (node: AnyNode): boolean => {
@@ -36,6 +66,7 @@ type SelectableNodeType =
   | 'wall'
   | 'fence'
   | 'item'
+  | 'column'
   | 'building'
   | 'zone'
   | 'slab'
@@ -44,6 +75,7 @@ type SelectableNodeType =
   | 'roof-segment'
   | 'stair'
   | 'stair-segment'
+  | 'spawn'
   | 'window'
   | 'door'
 
@@ -52,6 +84,16 @@ type ModifierKeys = {
   ctrl: boolean
 }
 
+type PaintPreviewCleanup = () => void
+
+type PaintInteraction = {
+  key: string
+  apply: (() => void) | null
+  hoverMode: HoverHighlightMode
+  hoveredId: AnyNodeId
+  preview: (() => PaintPreviewCleanup | null) | null
+}
+
 interface SelectionStrategy {
   types: SelectableNodeType[]
   handleSelect: (node: AnyNode, nativeEvent?: any, modifierKeys?: ModifierKeys) => void
@@ -175,10 +217,217 @@ function getIntersectionMaterialIndex(
   return group?.materialIndex
 }
 
-function setSelectedMaterialTargetForNode(
-  node: AnyNode,
-  role: MaterialTargetRole | null,
-) {
+function getRegisteredNodeObject(nodeId: string): Object3D | null {
+  return sceneRegistry.nodes.get(nodeId) ?? null
+}
+
+function getRegisteredMesh(nodeId: string): Mesh | null {
+  const object = getRegisteredNodeObject(nodeId)
+  return object && (object as Mesh).isMesh ? (object as Mesh) : null
+}
+
+function previewMeshMaterial(mesh: Mesh, material: Material | Material[]): PaintPreviewCleanup {
+  const previousMaterial = mesh.material
+  mesh.material = material
+  return () => {
+    mesh.material = previousMaterial
+  }
+}
+
+function previewCursor(cursor: string): PaintPreviewCleanup {
+  const previousCursor = document.body.style.cursor
+  document.body.style.cursor = cursor
+  return () => {
+    document.body.style.cursor = previousCursor
+  }
+}
+
+function getSingleSurfacePreviewMaterial(material: ActivePaintMaterial): Material | null {
+  if (material.materialPreset) {
+    return createMaterialFromPresetRef(material.materialPreset)
+  }
+
+  if (material.material) {
+    return createMaterial(material.material)
+  }
+
+  return null
+}
+
+function applyWallPaintPreview(
+  node: WallNode,
+  role: WallSurfaceSide,
+  material: ActivePaintMaterial,
+): PaintPreviewCleanup | null {
+  const mesh = getRegisteredMesh(node.id)
+  if (!mesh) return null
+
+  const previewNode = {
+    ...node,
+    ...buildWallSurfaceMaterialPatch(node, role, material.material, material.materialPreset),
+  }
+
+  return previewMeshMaterial(mesh, getVisibleWallMaterials(previewNode))
+}
+
+function applyRoofPaintPreview(
+  node: RoofNode,
+  role: 'top' | 'edge' | 'wall',
+  material: ActivePaintMaterial,
+): PaintPreviewCleanup | null {
+  const root = getRegisteredNodeObject(node.id)
+  const mesh = root?.getObjectByName('merged-roof') as Mesh | undefined
+  if (!mesh) return null
+
+  const previewNode = {
+    ...node,
+    ...buildRoofSurfaceMaterialPatch(node, role, material.material, material.materialPreset),
+  }
+  const previewMaterial = getRoofMaterialArray(previewNode)
+  if (!previewMaterial) return null
+
+  return previewMeshMaterial(mesh, previewMaterial)
+}
+
+function applyStairPaintPreview(
+  node: StairNode,
+  role: StairSurfaceMaterialRole,
+  material: ActivePaintMaterial,
+): PaintPreviewCleanup | null {
+  const root = getRegisteredNodeObject(node.id)
+  if (!root) return null
+
+  const previewNode = {
+    ...node,
+    ...buildStairSurfaceMaterialPatch(node, role, material.material, material.materialPreset),
+  }
+  const bodyMaterials = getStairBodyMaterials(previewNode)
+  const railingMaterial = getStairRailingMaterial(previewNode)
+  const restores: PaintPreviewCleanup[] = []
+
+  root.traverse((object) => {
+    if (!(object as Mesh).isMesh) return
+    const mesh = object as Mesh
+    if (mesh.name.startsWith('stair-railing')) {
+      restores.push(previewMeshMaterial(mesh, railingMaterial))
+      return
+    }
+    if (Array.isArray(mesh.material) && mesh.material.length === 2) {
+      restores.push(previewMeshMaterial(mesh, bodyMaterials))
+      return
+    }
+    if (mesh.name === 'merged-stair') {
+      restores.push(previewMeshMaterial(mesh, bodyMaterials))
+      return
+    }
+    if (mesh.name.startsWith('stair-side')) {
+      restores.push(previewMeshMaterial(mesh, bodyMaterials[1]))
+    }
+  })
+
+  if (restores.length === 0) return null
+
+  return () => {
+    for (let index = restores.length - 1; index >= 0; index -= 1) {
+      restores[index]?.()
+    }
+  }
+}
+
+function applySingleSurfacePaintPreview(
+  node: FenceNode | ColumnNode | SlabNode | CeilingNode,
+  material: ActivePaintMaterial,
+): PaintPreviewCleanup | null {
+  if (node.type === 'ceiling') {
+    const root = getRegisteredMesh(node.id)
+    const overlay = root?.getObjectByName('ceiling-grid') as Mesh | undefined
+    if (!(root && overlay)) return null
+
+    const previewColor =
+      getMaterialPresetByRef(material.materialPreset)?.mapProperties.color ??
+      resolveMaterial(material.material).color ??
+      '#999999'
+
+    const previousRootMaterial = root.material
+    const previousOverlayMaterial = overlay.material
+    const rootPreviewMaterial = Array.isArray(previousRootMaterial)
+      ? previousRootMaterial.map((entry) => entry.clone())
+      : previousRootMaterial.clone()
+    const overlayPreviewMaterial = Array.isArray(previousOverlayMaterial)
+      ? previousOverlayMaterial.map((entry) => entry.clone())
+      : previousOverlayMaterial.clone()
+
+    const applyColor = (input: Material | Material[]) => {
+      const materials = Array.isArray(input) ? input : [input]
+      for (const entry of materials) {
+        const materialWithColor = entry as Material & { color?: Color; needsUpdate?: boolean }
+        if (materialWithColor.color instanceof Color) {
+          materialWithColor.color = new Color(previewColor)
+        }
+        materialWithColor.needsUpdate = true
+      }
+    }
+
+    applyColor(rootPreviewMaterial)
+    applyColor(overlayPreviewMaterial)
+    root.material = rootPreviewMaterial
+    overlay.material = overlayPreviewMaterial
+
+    return () => {
+      root.material = previousRootMaterial
+      overlay.material = previousOverlayMaterial
+    }
+  }
+
+  const registeredObject = getRegisteredNodeObject(node.id)
+  const mesh =
+    registeredObject && (registeredObject as Mesh).isMesh ? (registeredObject as Mesh) : null
+
+  const previewMaterial = getSingleSurfacePreviewMaterial(material)
+  if (!previewMaterial) return null
+
+  if (node.type === 'column') {
+    if (!registeredObject) return null
+    const restores: PaintPreviewCleanup[] = []
+
+    registeredObject.traverse((object) => {
+      if (!(object as Mesh).isMesh) return
+      restores.push(previewMeshMaterial(object as Mesh, previewMaterial))
+    })
+
+    if (restores.length === 0) return null
+    return () => {
+      for (let index = restores.length - 1; index >= 0; index -= 1) {
+        restores[index]?.()
+      }
+    }
+  }
+
+  if (!mesh) return null
+
+  if (node.type === 'slab') {
+    const slabMaterial = previewMaterial.clone()
+    applyMaterialPresetToMaterials(slabMaterial, getMaterialPresetByRef(material.materialPreset))
+    const previewMeshMaterialInput = slabMaterial as Material & {
+      alphaMap?: unknown
+      depthWrite?: boolean
+      needsUpdate?: boolean
+      opacity?: number
+      side?: number
+      transparent?: boolean
+    }
+    previewMeshMaterialInput.transparent = false
+    previewMeshMaterialInput.opacity = 1
+    previewMeshMaterialInput.alphaMap = null
+    previewMeshMaterialInput.depthWrite = true
+    previewMeshMaterialInput.needsUpdate = true
+    return previewMeshMaterial(mesh, slabMaterial)
+  }
+
+  return previewMeshMaterial(mesh, previewMaterial)
+}
+
+function setSelectedMaterialTargetForNode(node: AnyNode, role: MaterialTargetRole | null) {
   if (!role) {
     const currentTarget = useEditor.getState().selectedMaterialTarget
     if (currentTarget?.nodeId !== node.id) {
@@ -209,6 +458,7 @@ const HIGHLIGHT_PROFILES = {
 } as const
 
 type HighlightKind = keyof typeof HIGHLIGHT_PROFILES
+type HoverHighlightMode = 'default' | 'delete' | 'paint-ready' | 'paint-disabled'
 
 type HighlightableMaterial = Material & {
   color?: Color
@@ -314,6 +564,7 @@ const SELECTION_STRATEGIES: Record<string, SelectionStrategy> = {
       'wall',
       'fence',
       'item',
+      'column',
       'zone',
       'slab',
       'ceiling',
@@ -321,6 +572,7 @@ const SELECTION_STRATEGIES: Record<string, SelectionStrategy> = {
       'roof-segment',
       'stair',
       'stair-segment',
+      'spawn',
       'window',
       'door',
     ],
@@ -366,12 +618,14 @@ const SELECTION_STRATEGIES: Record<string, SelectionStrategy> = {
       if (
         node.type === 'wall' ||
         node.type === 'fence' ||
+        node.type === 'column' ||
         node.type === 'slab' ||
         node.type === 'ceiling' ||
         node.type === 'roof' ||
         node.type === 'roof-segment' ||
         node.type === 'stair' ||
-        node.type === 'stair-segment'
+        node.type === 'stair-segment' ||
+        node.type === 'spawn'
       )
         return true
       if (node.type === 'item') {
@@ -428,12 +682,14 @@ const getSelectionTarget = (node: AnyNode): SelectionTarget | null => {
   if (
     node.type === 'wall' ||
     node.type === 'fence' ||
+    node.type === 'column' ||
     node.type === 'slab' ||
     node.type === 'ceiling' ||
     node.type === 'roof' ||
     node.type === 'roof-segment' ||
     node.type === 'stair' ||
     node.type === 'stair-segment' ||
+    node.type === 'spawn' ||
     node.type === 'window' ||
     node.type === 'door'
   ) {
@@ -475,13 +731,297 @@ export const SelectionManager = () => {
   const curvingFence = useEditor((s) => s.curvingFence)
 
   useEffect(() => {
-    setHoverHighlightMode(mode === 'delete' ? 'delete' : 'default')
+    const nextHoverMode: HoverHighlightMode = mode === 'delete' ? 'delete' : 'default'
+    setHoverHighlightMode(nextHoverMode)
 
     return () => {
       setHoverHighlightMode('default')
     }
   }, [mode, setHoverHighlightMode])
 
+  useEffect(() => {
+    if (mode !== 'material-paint') return
+    if (movingNode || curvingWall) return
+
+    let activePreview: { key: string; restore: PaintPreviewCleanup } | null = null
+
+    const clearActivePreview = () => {
+      activePreview?.restore()
+      activePreview = null
+    }
+
+    const resolveActivePaintMaterial = () =>
+      useEditor.getState().activePaintMaterial ??
+      resolveActivePaintMaterialFromSelection({
+        nodes: useScene.getState().nodes,
+        selectedId:
+          useViewer.getState().selection.selectedIds.length === 1
+            ? (useViewer.getState().selection.selectedIds[0] ?? null)
+            : null,
+        selectedMaterialTarget: useEditor.getState().selectedMaterialTarget,
+      })
+
+    const getPaintInteraction = (event: NodeEvent): PaintInteraction | null => {
+      const activePaintMaterial = resolveActivePaintMaterial()
+      const node = event.node
+
+      if (!isNodeInCurrentLevel(node)) return null
+
+      if (node.type === 'wall') {
+        const role = resolveWallMaterialTarget(event as WallEvent)
+        const compatible = role !== null && hasActivePaintMaterial(activePaintMaterial)
+        return {
+          key: `wall:${node.id}:${role ?? 'unsupported'}`,
+          hoveredId: node.id as AnyNodeId,
+          hoverMode:
+            compatible && hasActivePaintMaterial(activePaintMaterial) && role
+              ? 'paint-ready'
+              : 'paint-disabled',
+          apply:
+            compatible && hasActivePaintMaterial(activePaintMaterial)
+              ? () => {
+                  useScene
+                    .getState()
+                    .updateNode(
+                      node.id as AnyNodeId,
+                      buildWallSurfaceMaterialPatch(
+                        node as WallNode,
+                        role!,
+                        activePaintMaterial.material,
+                        activePaintMaterial.materialPreset,
+                      ),
+                    )
+                }
+              : null,
+          preview:
+            compatible && hasActivePaintMaterial(activePaintMaterial) && role
+              ? () => applyWallPaintPreview(node as WallNode, role, activePaintMaterial)
+              : () => previewCursor('not-allowed'),
+        }
+      }
+
+      if (node.type === 'roof' || node.type === 'roof-segment') {
+        const roofNode =
+          node.type === 'roof'
+            ? node
+            : node.parentId
+              ? useScene.getState().nodes[node.parentId as AnyNodeId]
+              : null
+        if (!roofNode || roofNode.type !== 'roof') return null
+
+        const role = resolveRoofMaterialTarget(event as RoofEvent | RoofSegmentEvent)
+        const compatible = role !== null && hasActivePaintMaterial(activePaintMaterial)
+        return {
+          key: `roof:${roofNode.id}:${role ?? 'unsupported'}`,
+          hoveredId: roofNode.id as AnyNodeId,
+          hoverMode:
+            compatible && hasActivePaintMaterial(activePaintMaterial) && role
+              ? 'paint-ready'
+              : 'paint-disabled',
+          apply:
+            compatible && hasActivePaintMaterial(activePaintMaterial)
+              ? () => {
+                  useScene
+                    .getState()
+                    .updateNode(
+                      roofNode.id as AnyNodeId,
+                      buildRoofSurfaceMaterialPatch(
+                        roofNode as RoofNode,
+                        role!,
+                        activePaintMaterial.material,
+                        activePaintMaterial.materialPreset,
+                      ),
+                    )
+                }
+              : null,
+          preview:
+            compatible && hasActivePaintMaterial(activePaintMaterial) && role
+              ? () => applyRoofPaintPreview(roofNode as RoofNode, role, activePaintMaterial)
+              : () => previewCursor('not-allowed'),
+        }
+      }
+
+      if (node.type === 'stair' || node.type === 'stair-segment') {
+        const stairNode =
+          node.type === 'stair'
+            ? node
+            : node.parentId
+              ? useScene.getState().nodes[node.parentId as AnyNodeId]
+              : null
+        if (!stairNode || stairNode.type !== 'stair') return null
+
+        const role = resolveStairMaterialTarget(event as StairEvent | StairSegmentEvent)
+        const compatible = role !== null && hasActivePaintMaterial(activePaintMaterial)
+        return {
+          key: `stair:${stairNode.id}:${role ?? 'unsupported'}`,
+          hoveredId: stairNode.id as AnyNodeId,
+          hoverMode:
+            compatible && hasActivePaintMaterial(activePaintMaterial) && role
+              ? 'paint-ready'
+              : 'paint-disabled',
+          apply:
+            compatible && hasActivePaintMaterial(activePaintMaterial)
+              ? () => {
+                  useScene
+                    .getState()
+                    .updateNode(
+                      stairNode.id as AnyNodeId,
+                      buildStairSurfaceMaterialPatch(
+                        stairNode as StairNode,
+                        role!,
+                        activePaintMaterial.material,
+                        activePaintMaterial.materialPreset,
+                      ),
+                    )
+                }
+              : null,
+          preview:
+            compatible && hasActivePaintMaterial(activePaintMaterial) && role
+              ? () => applyStairPaintPreview(stairNode as StairNode, role, activePaintMaterial)
+              : () => previewCursor('not-allowed'),
+        }
+      }
+
+      if (
+        node.type === 'fence' ||
+        node.type === 'column' ||
+        node.type === 'slab' ||
+        node.type === 'ceiling'
+      ) {
+        const compatible = hasActivePaintMaterial(activePaintMaterial)
+
+        return {
+          key: `${node.type}:${node.id}:surface`,
+          hoveredId: node.id as AnyNodeId,
+          hoverMode: compatible ? 'paint-ready' : 'paint-disabled',
+          apply: compatible
+            ? () => {
+                useScene
+                  .getState()
+                  .updateNode(
+                    node.id as AnyNodeId,
+                    buildSingleSurfaceMaterialPatch<
+                      FenceNode | ColumnNode | SlabNode | CeilingNode
+                    >(activePaintMaterial.material, activePaintMaterial.materialPreset),
+                  )
+              }
+            : null,
+          preview: compatible
+            ? () =>
+                applySingleSurfacePaintPreview(
+                  node as FenceNode | ColumnNode | SlabNode | CeilingNode,
+                  activePaintMaterial,
+                )
+            : () => previewCursor('not-allowed'),
+        }
+      }
+
+      const disabledNodeTypes = ['item', 'window', 'door', 'zone']
+      if (disabledNodeTypes.includes(node.type)) {
+        return {
+          key: `${node.type}:${node.id}:unsupported`,
+          hoveredId: node.id as AnyNodeId,
+          hoverMode: 'paint-disabled',
+          apply: null,
+          preview: () => previewCursor('not-allowed'),
+        }
+      }
+
+      return null
+    }
+
+    const onEnter = (event: NodeEvent) => {
+      if (boxSelectHandled) return
+
+      const interaction = getPaintInteraction(event)
+      if (!interaction) return
+
+      event.stopPropagation()
+
+      if (activePreview?.key === interaction.key) {
+        return
+      }
+
+      clearActivePreview()
+      useViewer.setState({ hoveredId: interaction.hoveredId })
+      setHoverHighlightMode(interaction.hoverMode)
+
+      const restore = interaction.preview?.()
+      if (restore) {
+        activePreview = { key: interaction.key, restore }
+      }
+    }
+
+    const onLeave = (event: NodeEvent) => {
+      const interaction = getPaintInteraction(event)
+      if (!interaction) return
+
+      if (activePreview?.key !== interaction.key) {
+        return
+      }
+
+      clearActivePreview()
+      if (useViewer.getState().hoveredId === interaction.hoveredId) {
+        useViewer.setState({ hoveredId: null })
+      }
+      setHoverHighlightMode('default')
+    }
+
+    const onClick = (event: NodeEvent) => {
+      if (boxSelectHandled) return
+
+      const interaction = getPaintInteraction(event)
+      if (!interaction) return
+
+      event.stopPropagation()
+
+      if (!interaction.apply) {
+        return
+      }
+
+      interaction.apply()
+      if (activePreview?.key === interaction.key) {
+        activePreview = null
+      } else {
+        clearActivePreview()
+      }
+      setHoverHighlightMode(interaction.hoverMode)
+    }
+
+    const allTypes = [
+      'wall',
+      'fence',
+      'item',
+      'column',
+      'slab',
+      'ceiling',
+      'roof',
+      'roof-segment',
+      'stair',
+      'stair-segment',
+      'window',
+      'door',
+      'zone',
+    ] as const
+
+    for (const type of allTypes) {
+      emitter.on(`${type}:enter` as any, onEnter as any)
+      emitter.on(`${type}:leave` as any, onLeave as any)
+      emitter.on(`${type}:click` as any, onClick as any)
+    }
+
+    return () => {
+      for (const type of allTypes) {
+        emitter.off(`${type}:enter` as any, onEnter as any)
+        emitter.off(`${type}:leave` as any, onLeave as any)
+        emitter.off(`${type}:click` as any, onClick as any)
+      }
+      clearActivePreview()
+      useViewer.setState({ hoveredId: null })
+      setHoverHighlightMode('default')
+    }
+  }, [curvingWall, mode, movingNode, setHoverHighlightMode])
+
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Meta') modifierKeysRef.current.meta = true
@@ -597,6 +1137,14 @@ export const SelectionManager = () => {
           nextMaterialTargetHandled = true
         }
 
+        if (
+          (node.type === 'fence' || node.type === 'slab' || node.type === 'ceiling') &&
+          nodeToSelect.type === node.type
+        ) {
+          setSelectedMaterialTargetForNode(nodeToSelect, 'surface')
+          nextMaterialTargetHandled = true
+        }
+
         if (!nextMaterialTargetHandled && useEditor.getState().selectedMaterialTarget) {
           useEditor.getState().setSelectedMaterialTarget(null)
         }
@@ -612,6 +1160,7 @@ export const SelectionManager = () => {
       'wall',
       'fence',
       'item',
+      'column',
       'building',
       'zone',
       'slab',
@@ -620,6 +1169,7 @@ export const SelectionManager = () => {
       'roof-segment',
       'stair',
       'stair-segment',
+      'spawn',
       'window',
       'door',
     ]
@@ -707,12 +1257,14 @@ export const SelectionManager = () => {
       } else if (
         node.type === 'wall' ||
         node.type === 'fence' ||
+        node.type === 'column' ||
         node.type === 'slab' ||
         node.type === 'ceiling' ||
         node.type === 'roof' ||
         node.type === 'roof-segment' ||
         node.type === 'stair' ||
         node.type === 'stair-segment' ||
+        node.type === 'spawn' ||
         node.type === 'window' ||
         node.type === 'door'
       ) {
@@ -758,6 +1310,7 @@ export const SelectionManager = () => {
       'wall',
       'fence',
       'item',
+      'column',
       'building',
       'slab',
       'ceiling',
@@ -765,6 +1318,7 @@ export const SelectionManager = () => {
       'roof-segment',
       'stair',
       'stair-segment',
+      'spawn',
       'window',
       'door',
       'zone',
@@ -830,12 +1384,14 @@ export const SelectionManager = () => {
       'wall',
       'fence',
       'item',
+      'column',
       'slab',
       'ceiling',
       'roof',
       'roof-segment',
       'stair',
       'stair-segment',
+      'spawn',
       'window',
       'door',
       'zone',
@@ -912,7 +1468,12 @@ const SelectionStateSync = () => {
     const selectedNode = useScene.getState().nodes[singleSelectedId as AnyNodeId]
     if (
       !selectedNode ||
-      (selectedNode.type !== 'wall' && selectedNode.type !== 'stair' && selectedNode.type !== 'roof')
+      (selectedNode.type !== 'wall' &&
+        selectedNode.type !== 'fence' &&
+        selectedNode.type !== 'slab' &&
+        selectedNode.type !== 'ceiling' &&
+        selectedNode.type !== 'stair' &&
+        selectedNode.type !== 'roof')
     ) {
       setSelectedMaterialTarget(null)
       return
@@ -1022,7 +1583,8 @@ const SelectionMaterialSync = () => {
   }, [hoverHighlightMode, hoveredId, previewSelectedIds, selectedIds, syncSelectionMaterials])
 
   useEffect(() => {
-    return useScene.subscribe(() => {
+    return useScene.subscribe((state, prevState) => {
+      if (state.nodes === prevState.nodes) return
       syncSelectionMaterials()
     })
   }, [syncSelectionMaterials])