@pascal-app/editor 0.9.1 → 1.0.0-beta.1

package/src/components/systems/ceiling/ceiling-system.tsx

@@ -1,17 +1,97 @@
 import { type AnyNodeId, sceneRegistry, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect } from 'react'
+import { Color, type Material, type Mesh } from 'three'
 import useEditor from '../../../store/use-editor'
+import useInteractionScope, { useMovingNode } from '../../../store/use-interaction-scope'
+
+const CEILING_GRID_HIGHLIGHT_COLOR = '#ffffff'
+const CEILING_GRID_BASE_MATERIAL_KEY = '__pascalCeilingGridBaseMaterial'
+const CEILING_GRID_HIGHLIGHT_MATERIAL_KEY = '__pascalCeilingGridHighlightMaterial'
+
+type CeilingGridUserData = {
+  [CEILING_GRID_BASE_MATERIAL_KEY]?: Material | Material[]
+  [CEILING_GRID_HIGHLIGHT_MATERIAL_KEY]?: Material | Material[]
+}
+
+type HighlightableMaterial = Material & {
+  color?: Color
+  depthWrite?: boolean
+  needsUpdate?: boolean
+  opacity?: number
+  transparent?: boolean
+}
+
+function cloneCeilingGridHighlightMaterial(material: Material | Material[]): Material | Material[] {
+  const cloneOne = (entry: Material): Material => {
+    const clone = entry.clone() as HighlightableMaterial
+    if (clone.color instanceof Color) {
+      clone.color.set(CEILING_GRID_HIGHLIGHT_COLOR)
+    }
+    clone.depthWrite = false
+    clone.opacity = 1
+    clone.transparent = true
+    clone.needsUpdate = true
+    return clone
+  }
+
+  return Array.isArray(material) ? material.map(cloneOne) : cloneOne(material)
+}
+
+function disposeMaterial(material: Material | Material[] | undefined) {
+  if (!material) return
+  const materials = Array.isArray(material) ? material : [material]
+  for (const entry of materials) {
+    entry.dispose()
+  }
+}
+
+function setCeilingGridHighlighted(ceilingGrid: Mesh, highlighted: boolean) {
+  const userData = ceilingGrid.userData as CeilingGridUserData
+
+  if (highlighted) {
+    if (!userData[CEILING_GRID_BASE_MATERIAL_KEY]) {
+      userData[CEILING_GRID_BASE_MATERIAL_KEY] = ceilingGrid.material
+      userData[CEILING_GRID_HIGHLIGHT_MATERIAL_KEY] = cloneCeilingGridHighlightMaterial(
+        ceilingGrid.material,
+      )
+    }
+
+    const highlightMaterial = userData[CEILING_GRID_HIGHLIGHT_MATERIAL_KEY]
+    if (highlightMaterial) {
+      ceilingGrid.material = highlightMaterial
+    }
+    return
+  }
+
+  const baseMaterial = userData[CEILING_GRID_BASE_MATERIAL_KEY]
+  if (baseMaterial) {
+    ceilingGrid.material = baseMaterial
+  }
+  disposeMaterial(userData[CEILING_GRID_HIGHLIGHT_MATERIAL_KEY])
+  delete userData[CEILING_GRID_BASE_MATERIAL_KEY]
+  delete userData[CEILING_GRID_HIGHLIGHT_MATERIAL_KEY]
+}
 
 export const CeilingSystem = () => {
   const tool = useEditor((state) => state.tool)
   const selectedItem = useEditor((state) => state.selectedItem)
-  const movingNode = useEditor((state) => state.movingNode)
+  const movingNode = useMovingNode()
   const selectedIds = useViewer((state) => state.selection.selectedIds)
   const activeLevelId = useViewer((state) => state.selection.levelId)
+  const hoveredId = useViewer((state) => state.hoveredId)
+  // A pending gesture (polygon/handle drag, reshape, move) must not flash the
+  // ceiling grid when the pointer strays over a ceiling — spatial hover events
+  // keep firing during host drags by design (see use-node-events), so the
+  // reveal is gated here, on the consumer.
+  const inputDragging = useViewer((state) => state.inputDragging)
+  const scopeIdle = useInteractionScope((state) => state.scope.kind === 'idle')
 
   useEffect(() => {
     const nodes = useScene.getState().nodes
+    const hoveredNode = hoveredId ? nodes[hoveredId as AnyNodeId] : null
+    const hoveredCeilingId =
+      hoveredNode?.type === 'ceiling' && scopeIdle && !inputDragging ? hoveredNode.id : null
 
     const levelsToShowCeilings = new Set<string>()
 
@@ -54,7 +134,7 @@ export const CeilingSystem = () => {
     ceilings.forEach((ceiling) => {
       const mesh = sceneRegistry.nodes.get(ceiling)
       if (mesh) {
-        const ceilingGrid = mesh.getObjectByName('ceiling-grid')
+        const ceilingGrid = mesh.getObjectByName('ceiling-grid') as Mesh | undefined
         if (ceilingGrid) {
           let belongsToVisibleLevel = false
           let currentId: string | null = ceiling
@@ -68,14 +148,27 @@ export const CeilingSystem = () => {
             currentId = node?.parentId as string | null
           }
 
+          const shouldHighlightGrid = ceiling === hoveredCeilingId
           const shouldShowGrid =
-            belongsToVisibleLevel || (levelsToShowCeilings.size === 0 && isCeilingToolActive)
+            shouldHighlightGrid ||
+            belongsToVisibleLevel ||
+            (levelsToShowCeilings.size === 0 && isCeilingToolActive)
 
+          setCeilingGridHighlighted(ceilingGrid, shouldHighlightGrid)
           ceilingGrid.visible = shouldShowGrid
           ceilingGrid.scale.setScalar(shouldShowGrid ? 1 : 0.0) // Scale down to zero to prevent event interference when grid is hidden
         }
       }
     })
-  }, [tool, selectedItem, movingNode, selectedIds, activeLevelId])
+  }, [
+    tool,
+    selectedItem,
+    movingNode,
+    selectedIds,
+    activeLevelId,
+    hoveredId,
+    scopeIdle,
+    inputDragging,
+  ])
   return null
 }