@pascal-app/editor 0.5.1 → 0.6.0

package/src/components/editor/index.tsx

@@ -23,6 +23,7 @@ import {
 import { initSFXBus } from '../../lib/sfx-bus'
 import useEditor from '../../store/use-editor'
 import { CeilingSystem } from '../systems/ceiling/ceiling-system'
+import { CeilingSelectionAffordanceSystem } from '../systems/ceiling/ceiling-selection-affordance-system'
 import { RoofEditSystem } from '../systems/roof/roof-edit-system'
 import { StairEditSystem } from '../systems/stair/stair-edit-system'
 import { ZoneLabelEditorSystem } from '../systems/zone/zone-label-editor-system'
@@ -523,6 +524,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       <ExportManager />
       {isFirstPersonMode ? <ViewerZoneSystem /> : <ZoneSystem />}
       <CeilingSystem />
+      <CeilingSelectionAffordanceSystem />
       <RoofEditSystem />
       <StairEditSystem />
       {!isLoading && !isFirstPersonMode && (

package/src/components/editor/node-action-menu.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Icon } from '@iconify/react'
-import { Copy, Move, Trash2 } from 'lucide-react'
+import { Copy, Move, Spline, Trash2 } from 'lucide-react'
 import type { MouseEventHandler, PointerEventHandler } from 'react'
 
 type NodeActionMenuProps = {
@@ -9,6 +9,7 @@ type NodeActionMenuProps = {
   onDelete?: MouseEventHandler<HTMLButtonElement>
   onDuplicate?: MouseEventHandler<HTMLButtonElement>
   onMove?: MouseEventHandler<HTMLButtonElement>
+  onCurve?: MouseEventHandler<HTMLButtonElement>
   onPointerDown?: PointerEventHandler<HTMLDivElement>
   onPointerUp?: PointerEventHandler<HTMLDivElement>
   onPointerEnter?: PointerEventHandler<HTMLDivElement>
@@ -20,6 +21,7 @@ export function NodeActionMenu({
   onDelete,
   onDuplicate,
   onMove,
+  onCurve,
   onPointerDown,
   onPointerUp,
   onPointerEnter,
@@ -44,6 +46,17 @@ export function NodeActionMenu({
           <Move className="h-4 w-4" />
         </button>
       )}
+      {onCurve && (
+        <button
+          aria-label="Curve"
+          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          onClick={onCurve}
+          title="Curve"
+          type="button"
+        >
+          <Spline className="h-4 w-4" />
+        </button>
+      )}
       {onDuplicate && (
         <button
           aria-label="Duplicate"

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

@@ -5,16 +5,24 @@ import {
   emitter,
   type ItemNode,
   type NodeEvent,
+  type RoofEvent,
+  type RoofSegmentEvent,
   resolveLevelId,
   sceneRegistry,
+  type StairEvent,
+  type StairNode,
+  type StairSurfaceMaterialRole,
+  type StairSegmentEvent,
   useScene,
+  type WallEvent,
+  type WallSurfaceSide,
 } from '@pascal-app/core'
 
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useRef } from 'react'
-import { Color, type Material, type Mesh, type Object3D } from 'three'
+import { Color, type BufferGeometry, type Material, type Mesh, type Object3D } from 'three'
 import { sfxEmitter } from '../../lib/sfx-bus'
-import useEditor, { 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 => {
@@ -68,6 +76,123 @@ export const resolveBuildingId = (
   return null
 }
 
+function resolveWallMaterialTarget(event: WallEvent): WallSurfaceSide | null {
+  const materialIndex = getIntersectionMaterialIndex(getEventObject(event), event.faceIndex)
+  if (materialIndex === 1) return 'interior'
+  if (materialIndex === 2) return 'exterior'
+
+  const normalZ = event.normal?.[2]
+  const localZ = event.localPosition[2]
+  const thickness = event.node.thickness ?? 0.1
+
+  if (
+    normalZ === undefined ||
+    Math.abs(normalZ) < 0.65 ||
+    Math.abs(localZ) < Math.max(thickness * 0.2, 0.01)
+  ) {
+    return null
+  }
+
+  const hitFace = localZ >= 0 ? 'front' : 'back'
+  const semantic = hitFace === 'front' ? event.node.frontSide : event.node.backSide
+
+  if (semantic === 'interior' || semantic === 'exterior') {
+    return semantic
+  }
+
+  return hitFace === 'front' ? 'interior' : 'exterior'
+}
+
+function resolveStairMaterialTarget(
+  event: StairEvent | StairSegmentEvent,
+): StairSurfaceMaterialRole | null {
+  const hitObjectName = event.nativeEvent.object?.name ?? ''
+  const materialIndex = getIntersectionMaterialIndex(getEventObject(event), event.faceIndex)
+
+  if (hitObjectName.startsWith('stair-railing')) {
+    return 'railing'
+  }
+
+  if (hitObjectName.startsWith('stair-side')) {
+    return 'side'
+  }
+
+  if (materialIndex === 0) {
+    return 'tread'
+  }
+
+  if (materialIndex === 1) {
+    return 'side'
+  }
+
+  const normalY = event.normal?.[1]
+  if (normalY !== undefined && normalY > 0.75) {
+    return 'tread'
+  }
+
+  if (normalY !== undefined && Math.abs(normalY) <= 0.75) {
+    return 'side'
+  }
+
+  return null
+}
+
+function resolveRoofMaterialTarget(
+  event: RoofEvent | RoofSegmentEvent,
+): 'top' | 'edge' | 'wall' | null {
+  const materialIndex = getIntersectionMaterialIndex(getEventObject(event), event.faceIndex)
+  if (materialIndex === 3) return 'top'
+  if (materialIndex === 0) return 'edge'
+  if (materialIndex === 1 || materialIndex === 2) return 'wall'
+
+  const normalY = event.normal?.[1]
+  if (normalY !== undefined && normalY > 0.35) return 'top'
+  if (normalY !== undefined && Math.abs(normalY) <= 0.35) return 'edge'
+  if (normalY !== undefined && normalY < -0.35) return 'wall'
+
+  return null
+}
+
+function getEventObject(event: NodeEvent): Object3D {
+  const eventWithObject = event as NodeEvent & { object?: Object3D }
+  return eventWithObject.object ?? event.nativeEvent.object
+}
+
+function getIntersectionMaterialIndex(
+  object: Object3D,
+  faceIndex: number | undefined,
+): number | undefined {
+  if (faceIndex === undefined) return undefined
+
+  const geometry = (object as Mesh).geometry as BufferGeometry | undefined
+  if (!geometry || geometry.groups.length === 0) return undefined
+
+  const triangleStart = faceIndex * 3
+  const group = geometry.groups.find(
+    (entry) => triangleStart >= entry.start && triangleStart < entry.start + entry.count,
+  )
+
+  return group?.materialIndex
+}
+
+function setSelectedMaterialTargetForNode(
+  node: AnyNode,
+  role: MaterialTargetRole | null,
+) {
+  if (!role) {
+    const currentTarget = useEditor.getState().selectedMaterialTarget
+    if (currentTarget?.nodeId !== node.id) {
+      useEditor.getState().setSelectedMaterialTarget(null)
+    }
+    return
+  }
+
+  useEditor.getState().setSelectedMaterialTarget({
+    nodeId: node.id as AnyNodeId,
+    role,
+  })
+}
+
 const HIGHLIGHT_PROFILES = {
   delete: {
     color: new Color('#dc2626'),
@@ -346,6 +471,8 @@ export const SelectionManager = () => {
   const clickHandledRef = useRef(false)
 
   const movingNode = useEditor((s) => s.movingNode)
+  const curvingWall = useEditor((s) => s.curvingWall)
+  const curvingFence = useEditor((s) => s.curvingFence)
 
   useEffect(() => {
     setHoverHighlightMode(mode === 'delete' ? 'delete' : 'default')
@@ -384,7 +511,7 @@ export const SelectionManager = () => {
 
   useEffect(() => {
     if (mode !== 'select') return
-    if (movingNode) return
+    if (movingNode || curvingWall || curvingFence) return
 
     const onClick = (event: NodeEvent) => {
       // Skip if box-select just completed (drag ended over a node)
@@ -438,6 +565,42 @@ export const SelectionManager = () => {
 
         activeStrategy.handleSelect(nodeToSelect, event.nativeEvent, modifierKeysRef.current)
 
+        let nextMaterialTargetHandled = false
+
+        if (node.type === 'wall' && nodeToSelect.type === 'wall') {
+          setSelectedMaterialTargetForNode(
+            nodeToSelect,
+            resolveWallMaterialTarget(event as WallEvent),
+          )
+          nextMaterialTargetHandled = true
+        }
+
+        if (
+          (node.type === 'stair' || node.type === 'stair-segment') &&
+          nodeToSelect.type === 'stair'
+        ) {
+          setSelectedMaterialTargetForNode(
+            nodeToSelect,
+            resolveStairMaterialTarget(event as StairEvent | StairSegmentEvent),
+          )
+          nextMaterialTargetHandled = true
+        }
+
+        if (
+          (node.type === 'roof' || node.type === 'roof-segment') &&
+          nodeToSelect.type === 'roof'
+        ) {
+          setSelectedMaterialTargetForNode(
+            nodeToSelect,
+            resolveRoofMaterialTarget(event as RoofEvent | RoofSegmentEvent),
+          )
+          nextMaterialTargetHandled = true
+        }
+
+        if (!nextMaterialTargetHandled && useEditor.getState().selectedMaterialTarget) {
+          useEditor.getState().setSelectedMaterialTarget(null)
+        }
+
         // Reset the handled flag after a short delay to allow grid:click to be ignored
         setTimeout(() => {
           clickHandledRef.current = false
@@ -470,6 +633,7 @@ export const SelectionManager = () => {
       const { phase, structureLayer } = useEditor.getState()
       const activeStrategy = SELECTION_STRATEGIES[phase]
       if (activeStrategy) activeStrategy.handleDeselect()
+      useEditor.getState().setSelectedMaterialTarget(null)
 
       // When deselecting from zone mode, return to structure select
       if (phase === 'structure' && structureLayer === 'zones') {
@@ -485,12 +649,12 @@ export const SelectionManager = () => {
       })
       emitter.off('grid:click', onGridClick)
     }
-  }, [mode, movingNode])
+  }, [curvingFence, curvingWall, mode, movingNode])
 
   // Global double-click handler for auto-switching phases and cross-phase hover
   useEffect(() => {
     if (mode !== 'select') return
-    if (movingNode) return
+    if (movingNode || curvingWall || curvingFence) return
 
     const onEnter = (event: NodeEvent) => {
       const node = event.node
@@ -619,7 +783,7 @@ export const SelectionManager = () => {
         emitter.off(`${type}:double-click` as any, onDoubleClick as any)
       })
     }
-  }, [mode, movingNode])
+  }, [curvingFence, curvingWall, mode, movingNode])
 
   // Delete mode: click-to-delete (sledgehammer tool)
   useEffect(() => {
@@ -703,6 +867,12 @@ export const SelectionManager = () => {
 }
 
 const SelectionStateSync = () => {
+  const selectedMaterialTarget = useEditor((s) => s.selectedMaterialTarget)
+  const setSelectedMaterialTarget = useEditor((s) => s.setSelectedMaterialTarget)
+  const singleSelectedId = useViewer((s) =>
+    s.selection.selectedIds.length === 1 ? s.selection.selectedIds[0] : null,
+  )
+
   useEffect(() => {
     return useScene.subscribe((state) => {
       const { buildingId, levelId, zoneId, selectedIds } = useViewer.getState().selection
@@ -731,6 +901,28 @@ const SelectionStateSync = () => {
     })
   }, [])
 
+  useEffect(() => {
+    if (!selectedMaterialTarget) return
+
+    if (!singleSelectedId) {
+      setSelectedMaterialTarget(null)
+      return
+    }
+
+    const selectedNode = useScene.getState().nodes[singleSelectedId as AnyNodeId]
+    if (
+      !selectedNode ||
+      (selectedNode.type !== 'wall' && selectedNode.type !== 'stair' && selectedNode.type !== 'roof')
+    ) {
+      setSelectedMaterialTarget(null)
+      return
+    }
+
+    if (selectedMaterialTarget.nodeId !== selectedNode.id) {
+      setSelectedMaterialTarget(null)
+    }
+  }, [selectedMaterialTarget, setSelectedMaterialTarget, singleSelectedId])
+
   return null
 }
 
@@ -919,13 +1111,13 @@ const EditorOutlinerSync = () => {
     outliner.selectedObjects.length = 0
     for (const id of idsToHighlight) {
       const obj = sceneRegistry.nodes.get(id)
-      if (obj) outliner.selectedObjects.push(obj)
+      if (obj?.parent) outliner.selectedObjects.push(obj)
     }
 
     outliner.hoveredObjects.length = 0
     if (hoveredId) {
       const obj = sceneRegistry.nodes.get(hoveredId)
-      if (obj) outliner.hoveredObjects.push(obj)
+      if (obj?.parent) outliner.hoveredObjects.push(obj)
     }
   }, [phase, previewSelectedIds, selection, hoveredId, outliner])
 

package/src/components/editor/site-edge-labels.tsx

@@ -20,12 +20,18 @@ function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
 }
 
 export function SiteEdgeLabels() {
-  const rootNodeIds = useScene((state) => state.rootNodeIds)
-  const nodes = useScene((state) => state.nodes)
+  // Narrow subscription to just the site node — subscribing to the full
+  // s.nodes dict re-rendered this on every wall/level mutation even though
+  // the site itself rarely changes.
+  const siteNode = useScene((state) => {
+    const firstRoot = state.rootNodeIds[0]
+    if (!firstRoot) return null
+    const node = state.nodes[firstRoot]
+    return node?.type === 'site' ? (node as SiteNode) : null
+  })
   const unit = useViewer((state) => state.unit)
   const theme = useViewer((state) => state.theme)
 
-  const siteNode = rootNodeIds[0] ? (nodes[rootNodeIds[0]] as SiteNode) : null
   const siteNodeId = siteNode?.id
 
   const isNight = theme === 'dark'