@pascal-app/editor 1.0.0-beta.4 → 1.0.0

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

@@ -11,6 +11,7 @@ import {
   getSelectableKinds,
   type ItemNode,
   isRegistrySelectable,
+  isSelectionHighlightEnabled,
   type NodeEvent,
   nodeRegistry,
   type RoofEvent,
@@ -23,6 +24,7 @@ import {
   type StairSurfaceMaterialRole,
   sceneRegistry,
   useLiveNodeOverrides,
+  useRegistryVersion,
   useScene,
 } from '@pascal-app/core'
 
@@ -30,6 +32,7 @@ import {
   createMaterial,
   createMaterialFromPresetRef,
   getRoofMaterialArray,
+  registerMaterialCacheCleanup,
   useViewer,
 } from '@pascal-app/viewer'
 import { useThree } from '@react-three/fiber'
@@ -38,10 +41,14 @@ import { type BufferGeometry, Color, type Material, type Mesh, type Object3D, Ve
 import {
   canDirectMoveNode,
   canDirectRotateNode,
+  pointerEventHitsEditorHandle,
+  resolveDirectManipulationNode,
   resolveDirectRotationDragDelta,
   resolveDirectRotationPatch,
+  shouldStartDirectMoveDrag,
 } from '../../lib/direct-manipulation'
 import { createEditorApi } from '../../lib/editor-api'
+import { selectionEnabled } from '../../lib/interaction/scope'
 import {
   type ActivePaintMaterial,
   buildRoofSegmentSurfaceMaterialPatch,
@@ -49,6 +56,11 @@ import {
   hasActivePaintMaterial,
   resolveActivePaintMaterialFromSelection,
 } from '../../lib/material-paint'
+import {
+  combinePaintPreviews,
+  createPaintPreviewOwner,
+  type PaintPreviewCleanup,
+} from '../../lib/paint-preview-owner'
 import {
   availablePaintScopes,
   commitPaintScopeFanout,
@@ -77,6 +89,7 @@ import useInteractionScope, {
   useIsCurveReshape,
   useMovingNode,
 } from '../../store/use-interaction-scope'
+import { expandSessionSelectionForNode } from '../../store/use-session-groups'
 import { boxSelectHandled, suppressBoxSelectForPointer } from '../tools/select/box-select-state'
 import { armGroupMove3d } from './group-move-3d'
 import { classifyParticipant } from './group-transform-shared'
@@ -110,8 +123,6 @@ type SelectableNodeType =
   | 'window'
   | 'door'
 
-type PaintPreviewCleanup = () => void
-
 type PaintInteraction = {
   key: string
   apply: (() => void) | null
@@ -590,6 +601,7 @@ const computeNextIds = (
     currentSelectedIds: selectedIds,
     modifierKeys: selectionModifiersFromEvent(event, modifierKeys),
     nodeId: node.id,
+    expandIdsForNode: expandSessionSelectionForNode,
   })
 }
 
@@ -774,11 +786,18 @@ export const SelectionManager = () => {
     meta: false,
     ctrl: false,
     shift: false,
+    alt: false,
   })
   const clickHandledRef = useRef(false)
 
   const movingNode = useMovingNode()
   const isCurveReshape = useIsCurveReshape()
+  // Plugin kinds register AFTER mount (async dynamic-import discovery), so
+  // every effect below that snapshots `getSelectableKinds()` into an emitter
+  // subscription list depends on this version — a late plugin load re-runs
+  // them and picks up the new kinds (hover / click / double-click / paint /
+  // pointerdown). Without it, plugin nodes select-but-never-hover in prod.
+  const registryVersion = useRegistryVersion()
 
   useEffect(() => {
     const nextHoverMode: HoverHighlightMode = mode === 'delete' ? 'delete' : 'default'
@@ -790,9 +809,12 @@ export const SelectionManager = () => {
   }, [mode, setHoverHighlightMode])
 
   useEffect(() => {
+    // re-subscribe when plugin kinds register after mount (async plugin load)
+    void registryVersion
     if (mode !== 'material-paint') return
     if (movingNode || isCurveReshape) return
 
+    const previewOwner = createPaintPreviewOwner()
     let activePreview: { key: string; restore: PaintPreviewCleanup } | null = null
     // The last hover event, replayed when the application scope cycles so the
     // preview + chip update under a stationary cursor (Shift fires no pointer move).
@@ -814,7 +836,7 @@ export const SelectionManager = () => {
         selectedMaterialTarget: useEditor.getState().selectedMaterialTarget,
       })
 
-    const getPaintInteraction = (event: NodeEvent): PaintInteraction | null => {
+    const resolvePaintInteraction = (event: NodeEvent): PaintInteraction | null => {
       const eraser = useEditor.getState().paintEraser
       const activePaintMaterial = resolveActivePaintMaterial()
       const node = event.node
@@ -937,27 +959,29 @@ export const SelectionManager = () => {
                   // paint capability builds the preview; restores combine.
                   const restores: PaintPreviewCleanup[] = []
                   const sceneNodes = useScene.getState().nodes
-                  for (const target of scopeTargets) {
-                    const targetNode = sceneNodes[target.nodeId]
-                    const targetRoot = getRegisteredNodeObject(target.nodeId)
-                    const targetCap = targetNode
-                      ? nodeRegistry.get(targetNode.type)?.capabilities?.paint
-                      : null
-                    if (!(targetNode && targetRoot && targetCap)) continue
-                    const restore = targetCap.applyPreview({
-                      node: targetNode,
-                      role: target.role,
-                      material: paintSpec.material,
-                      materialPreset: paintSpec.materialPreset,
-                      root: targetRoot,
-                    })
-                    if (restore) restores.push(restore)
+                  try {
+                    for (const target of scopeTargets) {
+                      const targetNode = sceneNodes[target.nodeId]
+                      const targetRoot = getRegisteredNodeObject(target.nodeId)
+                      const targetCap = targetNode
+                        ? nodeRegistry.get(targetNode.type)?.capabilities?.paint
+                        : null
+                      if (!(targetNode && targetRoot && targetCap)) continue
+                      const restore = targetCap.applyPreview({
+                        node: targetNode,
+                        role: target.role,
+                        material: paintSpec.material,
+                        materialPreset: paintSpec.materialPreset,
+                        root: targetRoot,
+                      })
+                      if (restore) restores.push(restore)
+                    }
+                  } catch (error) {
+                    combinePaintPreviews(restores)()
+                    throw error
                   }
                   if (restores.length === 0) return null
-                  return () => {
-                    for (let index = restores.length - 1; index >= 0; index -= 1)
-                      restores[index]?.()
-                  }
+                  return combinePaintPreviews(restores)
                 }
               : () => previewCursor('not-allowed'),
         }
@@ -1057,6 +1081,9 @@ export const SelectionManager = () => {
       return null
     }
 
+    const getPaintInteraction = (event: NodeEvent) =>
+      previewOwner.wrap(resolvePaintInteraction(event))
+
     const onEnter = (event: NodeEvent) => {
       // A host-driven drag (handle resize/rotate) sets `inputDragging`.
       // useNodeEvents now emits hover events during such a drag so surface
@@ -1185,25 +1212,28 @@ export const SelectionManager = () => {
       setHoverHighlightMode('default')
       useEditor.getState().setPaintHover(null)
     }
-  }, [isCurveReshape, mode, movingNode, setHoverHighlightMode])
+  }, [isCurveReshape, mode, movingNode, setHoverHighlightMode, registryVersion])
 
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Meta') modifierKeysRef.current.meta = true
       if (event.key === 'Control') modifierKeysRef.current.ctrl = true
       if (event.key === 'Shift') modifierKeysRef.current.shift = true
+      if (event.key === 'Alt') modifierKeysRef.current.alt = true
     }
 
     const onKeyUp = (event: KeyboardEvent) => {
       if (event.key === 'Meta') modifierKeysRef.current.meta = false
       if (event.key === 'Control') modifierKeysRef.current.ctrl = false
       if (event.key === 'Shift') modifierKeysRef.current.shift = false
+      if (event.key === 'Alt') modifierKeysRef.current.alt = false
     }
 
     const clearModifiers = () => {
       modifierKeysRef.current.meta = false
       modifierKeysRef.current.ctrl = false
       modifierKeysRef.current.shift = false
+      modifierKeysRef.current.alt = false
     }
 
     window.addEventListener('keydown', onKeyDown)
@@ -1218,12 +1248,16 @@ export const SelectionManager = () => {
   }, [])
 
   useEffect(() => {
+    // re-subscribe when plugin kinds register after mount (async plugin load)
+    void registryVersion
     if (mode !== 'select') return
     if (movingNode || isCurveReshape) return
 
     const onPointerDown = (event: NodeEvent) => {
+      if (!selectionEnabled(useInteractionScope.getState().scope)) return
       const pointer = pointerEventFromNodeEvent(event)
       if (pointer.button !== 0) return
+      const handleOwnsPointer = pointerEventHitsEditorHandle(event.nativeEvent)
 
       // Plain press on a transformable member of a multi-selection arms the
       // group move — dragging slides the whole selection on the ground plane
@@ -1231,6 +1265,7 @@ export const SelectionManager = () => {
       // group-move gizmo cross). A plain click (no drag) still falls through
       // to the normal click handling, which collapses to the pressed node.
       if (
+        !handleOwnsPointer &&
         !(pointer.shiftKey || pointer.altKey || isCommandModifier(pointer)) &&
         armGroupMove3d({
           nodeId: event.node.id as AnyNodeId,
@@ -1246,8 +1281,6 @@ export const SelectionManager = () => {
         return
       }
 
-      if (!isCommandModifier(pointer)) return
-
       const eventNode = useScene.getState().nodes[event.node.id as AnyNodeId] ?? event.node
       const node = resolveCanvasSelectionNode({
         node: eventNode,
@@ -1255,18 +1288,26 @@ export const SelectionManager = () => {
         selectedIds: useViewer.getState().selection.selectedIds,
       })
       if (!canDirectMoveNode(node)) return
-      // Sole selection only: per-node direct manipulation stands down for a
-      // multi-selection (the group sessions own plain drags there, and Cmd is
-      // the selection-toggle key — a wobbly Cmd+click must not yank one
-      // member out of the group).
       const currentSelectedIds = useViewer.getState().selection.selectedIds
-      if (currentSelectedIds.length !== 1 || currentSelectedIds[0] !== node.id) return
+      const allowPlainDrag = nodeRegistry.get(node.type)?.capabilities?.movable?.directDrag === true
+      if (
+        !shouldStartDirectMoveDrag({
+          allowPlainDrag,
+          commandModifier: isCommandModifier(pointer),
+          handleOwnsPointer,
+          nodeId: node.id,
+          selectedIds: currentSelectedIds,
+        })
+      ) {
+        return
+      }
 
       const startX = pointer.clientX
       const startY = pointer.clientY
       const pointerId = pointer.pointerId
       const pointerTarget = pointer.target instanceof EventTarget ? pointer.target : null
       let engaged = false
+      let engagedTargetId: AnyNodeId | null = null
 
       const cleanup = () => {
         window.removeEventListener('pointermove', onMove)
@@ -1288,8 +1329,9 @@ export const SelectionManager = () => {
         useViewer.getState().setInputDragging(true)
         swallowNextClick()
         createEditorApi().engageMoveDrag(node)
+        engagedTargetId = (getMovingNode()?.id as AnyNodeId | undefined) ?? null
         requestAnimationFrame(() => {
-          if (getMovingNode()?.id !== node.id) return
+          if (!getMovingNode()) return
           pointerTarget?.dispatchEvent(
             new PointerEvent('pointermove', {
               altKey: moveEvent.altKey,
@@ -1313,7 +1355,7 @@ export const SelectionManager = () => {
         if (engaged) {
           requestAnimationFrame(() => {
             const editor = useEditor.getState()
-            if (getMovingNode()?.id !== node.id || !editor.placementDragMode) return
+            if (getMovingNode()?.id !== engagedTargetId || !editor.placementDragMode) return
             editor.setMovingNode(null)
           })
         }
@@ -1357,7 +1399,7 @@ export const SelectionManager = () => {
         emitter.off(`${type}:pointerdown` as any, onPointerDown as any)
       }
     }
-  }, [isCurveReshape, mode, movingNode, camera, raycaster, glDomElement])
+  }, [isCurveReshape, mode, movingNode, camera, raycaster, glDomElement, registryVersion])
 
   // Move cursor over the selected movable node: the visual cue that clicking it
   // picks it up (replaces the removed move-cross gizmo). Reacts only when the
@@ -1375,7 +1417,7 @@ export const SelectionManager = () => {
       if (key === prevKey) return
       prevKey = key
       let wantsMove = false
-      if (hoveredId && !getMovingNode()) {
+      if (hoveredId && !getMovingNode() && selectionEnabled(useInteractionScope.getState().scope)) {
         if (sole === hoveredId) {
           const node = useScene.getState().nodes[sole as AnyNodeId]
           wantsMove = !!node && canDirectMoveNode(node)
@@ -1523,6 +1565,8 @@ export const SelectionManager = () => {
   }, [isCurveReshape, mode, movingNode])
 
   useEffect(() => {
+    // re-subscribe when plugin kinds register after mount (async plugin load)
+    void registryVersion
     if (mode !== 'select') return
     if (movingNode || isCurveReshape) return
 
@@ -1538,6 +1582,7 @@ export const SelectionManager = () => {
       // body click so only the reshape tool handles the release. (Scoped to
       // `endpoint`: hole-edit relies on node clicks to exit, just below.)
       const activeScope = useInteractionScope.getState().scope
+      if (activeScope.kind === 'mesh-editing') return
       if (activeScope.kind === 'reshaping' && activeScope.reshape === 'endpoint') return
 
       if (dispatchSceneAction(event.node, getEventObject(event))) {
@@ -1636,9 +1681,16 @@ export const SelectionManager = () => {
         const hasModifier = nativeEvent.shiftKey || isCommandModifier(nativeEvent)
         const isAlreadySole =
           selectedIdsBeforeRouting.length === 1 && selectedIdsBeforeRouting[0] === nodeToSelect.id
-        if (!hasModifier && isAlreadySole && !getMovingNode() && canDirectMoveNode(nodeToSelect)) {
+        if (
+          useEditor.getState().mode !== 'delete' &&
+          !hasModifier &&
+          isAlreadySole &&
+          !getMovingNode() &&
+          canDirectMoveNode(nodeToSelect)
+        ) {
           sfxEmitter.emit('sfx:item-pick')
-          useEditor.getState().setMovingNode(nodeToSelect as never)
+          const moveTarget = resolveDirectManipulationNode(nodeToSelect, useScene.getState().nodes)
+          useEditor.getState().setMovingNode(moveTarget as never)
           useViewer.getState().setSelection({ selectedIds: [] })
           return
         }
@@ -1754,6 +1806,7 @@ export const SelectionManager = () => {
     const onGridClick = (event: GridEvent) => {
       if (clickHandledRef.current) return
       if (boxSelectHandled) return
+      if (useInteractionScope.getState().scope.kind === 'mesh-editing') return
       const nativeEvent = event.nativeEvent
       if (nativeEvent?.metaKey || nativeEvent?.ctrlKey || nativeEvent?.shiftKey) return
       const { phase, structureLayer } = useEditor.getState()
@@ -1775,14 +1828,17 @@ export const SelectionManager = () => {
       })
       emitter.off('grid:click', onGridClick)
     }
-  }, [isCurveReshape, mode, movingNode])
+  }, [isCurveReshape, mode, movingNode, registryVersion])
 
   // Global double-click handler for auto-switching phases and cross-phase hover
   useEffect(() => {
+    // re-subscribe when plugin kinds register after mount (async plugin load)
+    void registryVersion
     if (mode !== 'select') return
     if (movingNode || isCurveReshape) return
 
     const onEnter = (event: NodeEvent) => {
+      if (useInteractionScope.getState().scope.kind === 'mesh-editing') return
       // A host-driven drag (handle resize/rotate, box-select) sets
       // `inputDragging`. useNodeEvents still emits hover events during it so
       // surface move tools keep tracking — but the select-hover outline must
@@ -1831,6 +1887,7 @@ export const SelectionManager = () => {
     }
 
     const onDoubleClick = (event: NodeEvent) => {
+      if (useInteractionScope.getState().scope.kind === 'mesh-editing') return
       let node = resolveCanvasSelectionNode({
         node: resolveSelectModeNodeTarget(event),
         nodes: useScene.getState().nodes,
@@ -1930,10 +1987,12 @@ export const SelectionManager = () => {
         emitter.off(`${type}:double-click` as any, onDoubleClick as any)
       })
     }
-  }, [isCurveReshape, mode, movingNode])
+  }, [isCurveReshape, mode, movingNode, registryVersion])
 
   // Delete mode: click-to-delete (sledgehammer tool)
   useEffect(() => {
+    // re-subscribe when plugin kinds register after mount (async plugin load)
+    void registryVersion
     if (mode !== 'delete') return
 
     const onClick = (event: NodeEvent) => {
@@ -2006,7 +2065,7 @@ export const SelectionManager = () => {
       }
       useViewer.setState({ hoveredId: null })
     }
-  }, [mode])
+  }, [mode, registryVersion])
 
   return (
     <>
@@ -2096,6 +2155,7 @@ const SelectionMaterialSync = () => {
   const previewSelectedIds = useViewer((s) => s.previewSelectedIds)
   const hoveredId = useViewer((s) => s.hoveredId)
   const hoverHighlightMode = useViewer((s) => s.hoverHighlightMode)
+  const registryVersion = useRegistryVersion()
   const geometryRevision = useViewer((s) => s.geometryRevision)
   const activeHighlightKindsRef = useRef(new Map<string, HighlightKind>())
   const highlightedMaterialsRef = useRef(
@@ -2118,6 +2178,10 @@ const SelectionMaterialSync = () => {
         continue
       }
 
+      if (node && !isSelectionHighlightEnabled(node.type)) {
+        continue
+      }
+
       const rootObject = sceneRegistry.nodes.get(id)
       if (!rootObject) {
         continue
@@ -2173,6 +2237,7 @@ const SelectionMaterialSync = () => {
   }, [])
 
   useEffect(() => {
+    void registryVersion
     void geometryRevision
     const nextHighlightKinds = new Map<string, HighlightKind>()
 
@@ -2188,6 +2253,7 @@ const SelectionMaterialSync = () => {
     syncSelectionMaterials()
   }, [
     geometryRevision,
+    registryVersion,
     hoverHighlightMode,
     hoveredId,
     previewSelectedIds,
@@ -2228,7 +2294,7 @@ const SelectionMaterialSync = () => {
   }, [])
 
   useEffect(() => {
-    return () => {
+    const clearHighlights = () => {
       for (const [mesh, entry] of highlightedMaterialsRef.current.entries()) {
         if (mesh.material === entry.highlightedMaterial) {
           mesh.material = entry.originalMaterial
@@ -2238,6 +2304,11 @@ const SelectionMaterialSync = () => {
 
       highlightedMaterialsRef.current.clear()
     }
+    const unsubscribe = registerMaterialCacheCleanup(clearHighlights)
+    return () => {
+      unsubscribe()
+      clearHighlights()
+    }
   }, [])
 
   return null
@@ -2249,11 +2320,13 @@ const EditorOutlinerSync = () => {
   const previewSelectedIds = useViewer((s) => s.previewSelectedIds)
   const hoveredId = useViewer((s) => s.hoveredId)
   const geometryRevision = useViewer((s) => s.geometryRevision)
+  const registryVersion = useRegistryVersion()
   const outliner = useViewer((s) => s.outliner)
   const nodes = useScene((s) => s.nodes)
 
   useEffect(() => {
     void geometryRevision
+    void registryVersion
     let idsToHighlight: string[] = []
 
     // 1. Determine what should be highlighted based on Phase
@@ -2288,7 +2361,8 @@ const EditorOutlinerSync = () => {
     // 2. Sync with the imperative outliner arrays (mutate in place to keep references)
     outliner.selectedObjects.length = 0
     for (const id of idsToHighlight) {
-      if (!nodes[id as AnyNodeId]) continue
+      const node = nodes[id as AnyNodeId]
+      if (!(node && isSelectionHighlightEnabled(node.type))) continue
       const obj = sceneRegistry.nodes.get(id)
       if (obj?.parent) outliner.selectedObjects.push(obj)
     }
@@ -2299,14 +2373,25 @@ const EditorOutlinerSync = () => {
         useViewer.setState({ hoveredId: null })
       } else {
         const hoveredNode = nodes[hoveredId as AnyNodeId]
-        const obj =
-          hoveredNode?.type === 'roof-segment'
-            ? (getHoveredRoofSegmentOutlineProxy(hoveredId) ?? sceneRegistry.nodes.get(hoveredId))
-            : sceneRegistry.nodes.get(hoveredId)
-        if (obj?.parent) outliner.hoveredObjects.push(obj)
+        if (hoveredNode && isSelectionHighlightEnabled(hoveredNode.type)) {
+          const obj =
+            hoveredNode.type === 'roof-segment'
+              ? (getHoveredRoofSegmentOutlineProxy(hoveredId) ?? sceneRegistry.nodes.get(hoveredId))
+              : sceneRegistry.nodes.get(hoveredId)
+          if (obj?.parent) outliner.hoveredObjects.push(obj)
+        }
       }
     }
-  }, [geometryRevision, phase, previewSelectedIds, selection, hoveredId, outliner, nodes])
+  }, [
+    geometryRevision,
+    registryVersion,
+    phase,
+    previewSelectedIds,
+    selection,
+    hoveredId,
+    outliner,
+    nodes,
+  ])
 
   return null
 }

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

@@ -50,6 +50,7 @@ export function SiteEdgeLabels() {
   })
   const activeHandleDrag = useActiveHandleDrag()
   const unit = useViewer((state) => state.unit)
+  const metricNotation = useViewer((state) => state.metricNotation)
   const cameraMode = useViewer((state) => state.cameraMode)
   const isNight = useViewer((state) => getSceneTheme(state.sceneTheme).appearance === 'dark')
   const camera = useThree((state) => state.camera)
@@ -132,7 +133,7 @@ export function SiteEdgeLabels() {
               textShadow: `-1.5px -1.5px 0 ${shadowColor}, 1.5px -1.5px 0 ${shadowColor}, -1.5px 1.5px 0 ${shadowColor}, 1.5px 1.5px 0 ${shadowColor}, 0 0 4px ${shadowColor}, 0 0 4px ${shadowColor}`,
             }}
           >
-            {formatLinearMeasurement(edge.dist, unit)}
+            {formatLinearMeasurement(edge.dist, unit, metricNotation)}
           </div>
         </Html>
       ))}