@pascal-app/editor 0.9.1 → 0.9.2

package/src/components/editor-2d/floorplan-quick-measure-layer.tsx

@@ -0,0 +1,212 @@
+'use client'
+
+import { useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { type RefObject, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import {
+  createQuickMeasurementPointerScheduler,
+  resolveQuickMeasurementReport,
+} from '../../lib/quick-measurement'
+import {
+  activateQuickMeasurementHudSource,
+  clearQuickMeasurementHudSource,
+  publishQuickMeasurementHudSource,
+} from '../../store/use-quick-measurement-hud'
+import { useFloorplanRender } from './floorplan-render-context'
+
+type FloorplanQuickMeasureHit = {
+  nodeId: string
+  point: { x: number; y: number }
+}
+
+function nodeIdFromElement(element: Element | null): string | null {
+  const entry = element?.closest<SVGGElement>('.floorplan-registry-entry[data-node-id]')
+  return entry?.dataset.nodeId ?? null
+}
+
+function nodeIdAtPointer(svg: SVGSVGElement, event: PointerEvent): string | null {
+  const direct = event.target instanceof Element ? nodeIdFromElement(event.target) : null
+  if (direct) return direct
+  for (const element of document.elementsFromPoint(event.clientX, event.clientY)) {
+    if (!svg.contains(element)) continue
+    const nodeId = nodeIdFromElement(element)
+    if (nodeId) return nodeId
+  }
+  return null
+}
+
+function pointAtPointer(
+  group: SVGGElement,
+  event: PointerEvent,
+): FloorplanQuickMeasureHit['point'] | null {
+  const matrix = group.getScreenCTM()
+  if (!matrix) return null
+  const point = new DOMPoint(event.clientX, event.clientY).matrixTransform(matrix.inverse())
+  return { x: point.x, y: point.y }
+}
+
+function FloorplanSmartMarker({
+  hit,
+  pinned,
+  unitsPerPixel,
+  markerRef,
+}: {
+  hit?: FloorplanQuickMeasureHit
+  pinned: boolean
+  unitsPerPixel: number
+  markerRef?: RefObject<SVGGElement | null>
+}) {
+  const localRef = useRef<SVGGElement>(null)
+  const ref = markerRef ?? localRef
+
+  useLayoutEffect(() => {
+    if (!hit) ref.current?.setAttribute('display', 'none')
+  }, [hit, ref])
+
+  return (
+    <g ref={ref} transform={hit ? `translate(${hit.point.x} ${hit.point.y})` : undefined}>
+      <circle
+        cx={0}
+        cy={0}
+        fill="none"
+        r={(pinned ? 11 : 8) * unitsPerPixel}
+        stroke={pinned ? '#0e7490' : '#0891b2'}
+        strokeWidth={pinned ? 2.5 : 2}
+        vectorEffect="non-scaling-stroke"
+      />
+      {pinned ? <circle cx={0} cy={0} fill="#0e7490" r={2.75 * unitsPerPixel} /> : null}
+    </g>
+  )
+}
+
+function showFloorplanSmartMarker(
+  marker: SVGGElement | null,
+  point: FloorplanQuickMeasureHit['point'],
+) {
+  if (!marker) return
+  marker.setAttribute('transform', `translate(${point.x} ${point.y})`)
+  marker.removeAttribute('display')
+}
+
+function hideFloorplanSmartMarker(marker: SVGGElement | null) {
+  marker?.setAttribute('display', 'none')
+}
+
+export function FloorplanQuickMeasureLayer() {
+  const groupRef = useRef<SVGGElement>(null)
+  const hoverRef = useRef<FloorplanQuickMeasureHit | null>(null)
+  const hoverNodeIdRef = useRef<string | null>(null)
+  const candidateNodeIdRef = useRef<string | null | undefined>(undefined)
+  const candidateHasReportRef = useRef(false)
+  const hoverMarkerRef = useRef<SVGGElement>(null)
+  const [hoverNodeId, setHoverNodeId] = useState<string | null>(null)
+  const [pinned, setPinned] = useState<FloorplanQuickMeasureHit | null>(null)
+  const nodes = useScene((state) => state.nodes)
+  const candidateNodesRef = useRef(nodes)
+  const levelId = useViewer((state) => state.selection.levelId)
+  const levelRef = useRef(levelId)
+  const renderContext = useFloorplanRender()
+  const hoverReport = useMemo(
+    () => resolveQuickMeasurementReport(hoverNodeId, nodes),
+    [hoverNodeId, nodes],
+  )
+  const pinnedReport = useMemo(
+    () => resolveQuickMeasurementReport(pinned?.nodeId ?? null, nodes),
+    [pinned?.nodeId, nodes],
+  )
+
+  useEffect(() => {
+    if (levelRef.current === levelId) return
+    levelRef.current = levelId
+    hoverRef.current = null
+    hoverNodeIdRef.current = null
+    candidateNodeIdRef.current = undefined
+    candidateHasReportRef.current = false
+    hideFloorplanSmartMarker(hoverMarkerRef.current)
+    setHoverNodeId(null)
+    setPinned(null)
+  }, [levelId])
+
+  useEffect(() => {
+    const group = groupRef.current
+    const svg = groupRef.current?.ownerSVGElement
+    if (!(group && svg)) return
+    const updateHover = (next: FloorplanQuickMeasureHit | null) => {
+      hoverRef.current = next
+      if (next) showFloorplanSmartMarker(hoverMarkerRef.current, next.point)
+      else hideFloorplanSmartMarker(hoverMarkerRef.current)
+      const nextNodeId = next?.nodeId ?? null
+      if (nextNodeId === hoverNodeIdRef.current) return
+      hoverNodeIdRef.current = nextNodeId
+      setHoverNodeId(nextNodeId)
+    }
+    const processPointerMove = (event: PointerEvent) => {
+      activateQuickMeasurementHudSource('2d')
+      const candidateNodeId = nodeIdAtPointer(svg, event)
+      const sceneNodes = useScene.getState().nodes
+      if (candidateNodesRef.current !== sceneNodes) {
+        candidateNodesRef.current = sceneNodes
+        candidateNodeIdRef.current = undefined
+      }
+      if (candidateNodeId !== candidateNodeIdRef.current) {
+        candidateNodeIdRef.current = candidateNodeId
+        candidateHasReportRef.current = Boolean(
+          resolveQuickMeasurementReport(candidateNodeId, sceneNodes),
+        )
+      }
+      const point = candidateHasReportRef.current ? pointAtPointer(group, event) : null
+      updateHover(candidateNodeId && point ? { nodeId: candidateNodeId, point } : null)
+    }
+    const pointerScheduler = createQuickMeasurementPointerScheduler(processPointerMove)
+    const onPointerMove = (event: PointerEvent) => pointerScheduler.enqueue(event)
+    const clear = () => {
+      pointerScheduler.clear()
+      updateHover(null)
+    }
+    const onClick = (event: MouseEvent) => {
+      const next = hoverRef.current
+      if (!(next && event.button === 0)) return
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      activateQuickMeasurementHudSource('2d')
+      setPinned(next)
+    }
+
+    svg.addEventListener('pointermove', onPointerMove, true)
+    svg.addEventListener('pointerleave', clear)
+    svg.addEventListener('click', onClick, true)
+    return () => {
+      svg.removeEventListener('pointermove', onPointerMove, true)
+      svg.removeEventListener('pointerleave', clear)
+      svg.removeEventListener('click', onClick, true)
+      pointerScheduler.clear()
+    }
+  }, [])
+
+  const unitsPerPixel = Math.max(renderContext?.unitsPerPixel ?? 0.01, 1e-6)
+  const activeHit = hoverReport ? hoverRef.current : pinnedReport ? pinned : null
+  const report = hoverReport ?? pinnedReport
+  const lensState =
+    pinnedReport && activeHit?.nodeId === pinned?.nodeId ? ('pinned' as const) : ('live' as const)
+
+  useEffect(() => {
+    publishQuickMeasurementHudSource('2d', report ? { lensState, report } : null)
+  }, [lensState, report])
+
+  useEffect(() => () => clearQuickMeasurementHudSource('2d'), [])
+
+  return (
+    <g pointerEvents="none" ref={groupRef}>
+      {pinned && pinnedReport ? (
+        <FloorplanSmartMarker hit={pinned} pinned unitsPerPixel={unitsPerPixel} />
+      ) : null}
+      <FloorplanSmartMarker
+        markerRef={hoverMarkerRef}
+        pinned={false}
+        unitsPerPixel={unitsPerPixel}
+      />
+    </g>
+  )
+}
+
+export default FloorplanQuickMeasureLayer

package/src/components/editor-2d/floorplan-registry-action-menu.tsx

@@ -4,8 +4,11 @@ import {
   type AnyNode,
   type AnyNodeId,
   type CeilingNode,
+  createSceneApi,
   getWallMidpointHandlePoint,
+  type NodeQuickAction,
   nodeRegistry,
+  runAsSingleSceneHistoryStep,
   type SlabNode,
   useLiveNodeOverrides,
   useScene,
@@ -14,9 +17,90 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
+import { useShallow } from 'zustand/react/shallow'
+import {
+  createFreshPlacementSubtree,
+  duplicatesAsFreshSubtree,
+} from '../../lib/fresh-planar-placement'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import useEditor from '../../store/use-editor'
+import { useMovingNode } from '../../store/use-interaction-scope'
 import { NodeActionMenu } from '../editor/node-action-menu'
+import { IconRefGlyph } from '../ui/icon-ref'
+
+function SideAddGlyph({ direction }: { direction: 'left' | 'right' }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-3.5 w-3.5"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.7"
+      viewBox="0 0 24 24"
+    >
+      <rect x="8" y="7" width="9" height="10" rx="1.75" />
+      <path d="M12.5 7v10" />
+      {direction === 'left' ? (
+        <>
+          <path d="M6.5 12H2.75" />
+          <path d="m5.5 9.75-2.75 2.25 2.75 2.25" />
+        </>
+      ) : (
+        <>
+          <path d="M17.5 12h3.75" />
+          <path d="m18.5 9.75 2.75 2.25-2.75 2.25" />
+        </>
+      )}
+    </svg>
+  )
+}
+
+// Builtin string tokens map to the generic glyphs above; kind-owned marks
+// arrive as IconRef objects and render through the shared IconRefGlyph.
+// Mirrors the 3D floating-action-menu (2D ↔ 3D parity).
+function QuickActionIcon({ action }: { action: NodeQuickAction }) {
+  const icon = action.icon
+  if (!icon) return null
+  if (typeof icon === 'object') return <IconRefGlyph icon={icon} size={14} />
+  switch (icon) {
+    case 'add-left':
+      return <SideAddGlyph direction="left" />
+    case 'add-right':
+      return <SideAddGlyph direction="right" />
+    default:
+      return null
+  }
+}
+
+function collectQuickActionNodes(
+  nodes: Record<AnyNodeId, AnyNode>,
+  selectedId: string | null,
+): Record<AnyNodeId, AnyNode> | null {
+  if (!selectedId) return null
+  const selected = nodes[selectedId as AnyNodeId]
+  if (!selected || !nodeRegistry.get(selected.type)?.quickActions) return null
+
+  const collected: Record<AnyNodeId, AnyNode> = { [selected.id as AnyNodeId]: selected }
+  const add = (id: string | null | undefined) => {
+    if (!id) return
+    const node = nodes[id as AnyNodeId]
+    if (node) collected[node.id as AnyNodeId] = node
+  }
+  const addChildren = (node: AnyNode | undefined) => {
+    for (const childId of (node as { children?: readonly string[] } | undefined)?.children ?? []) {
+      add(childId)
+    }
+  }
+
+  add(selected.parentId ?? null)
+  addChildren(selected)
+  const parent = selected.parentId ? nodes[selected.parentId as AnyNodeId] : undefined
+  addChildren(parent)
+
+  return collected
+}
 
 /**
  * Floating Move / Duplicate / Delete buttons that appear above the
@@ -45,9 +129,21 @@ import { NodeActionMenu } from '../editor/node-action-menu'
  * Hidden while in a move state (so we don't show buttons over a ghost).
  */
 export function FloorplanRegistryActionMenu() {
-  const selectedId = useViewer((s) => s.selection.selectedIds[0]) as AnyNodeId | undefined
-  const movingNode = useEditor((s) => s.movingNode)
+  // Sole selection only — a multi-selection gets the group menu
+  // (`FloorplanGroupActionMenu`), whose actions target the whole selection.
+  const selectedId = useViewer((s) =>
+    s.selection.selectedIds.length === 1 ? s.selection.selectedIds[0] : undefined,
+  ) as AnyNodeId | undefined
+  const movingNode = useMovingNode()
   const setMovingNode = useEditor((s) => s.setMovingNode)
+  const setMovingNodeOrigin = useEditor((s) => s.setMovingNodeOrigin)
+  // Gate on floorplan hover so this 2D menu never coexists with the 3D
+  // FloatingActionMenu in split view — that menu hides while the floorplan
+  // is hovered, so this one must only show then. Mirrors the legacy
+  // FloorplanActionMenuLayer guard. Without it a registry kind (e.g. a
+  // duct) shows two Duplicate buttons whenever the pointer is outside the
+  // 2D panel.
+  const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered)
 
   const [position, setPosition] = useState<{ left: number; top: number } | null>(null)
 
@@ -56,8 +152,12 @@ export function FloorplanRegistryActionMenu() {
   const selectedKind = useScene((s) => (selectedId ? (s.nodes[selectedId]?.type ?? null) : null))
   const def = selectedKind ? nodeRegistry.get(selectedKind) : null
   const isRegistryKind = !!def
-  const isVisible = isRegistryKind && !movingNode
+  const isVisible =
+    isRegistryKind && def?.presentation?.actionMenu !== false && !movingNode && isFloorplanHovered
   const isWall = selectedKind === 'wall'
+  const quickActionNodes = useScene(
+    useShallow((s) => collectQuickActionNodes(s.nodes, selectedId ?? null)),
+  )
 
   useEffect(() => {
     if (!(isVisible && selectedId)) {
@@ -117,6 +217,14 @@ export function FloorplanRegistryActionMenu() {
   const node = useScene.getState().nodes[selectedId]
   if (!node) return null
 
+  const quickActions =
+    quickActionNodes && nodeRegistry.get(node.type)?.quickActions
+      ? (nodeRegistry.get(node.type)?.quickActions?.({
+          node: node as never,
+          nodes: quickActionNodes,
+        }) ?? [])
+      : []
+
   // Move button is enabled when any of:
   //   - `capabilities.movable` (generic translate-on-XZ — shelf / spawn / fence)
   //   - `def.floorplanMoveTarget` (anchor-aware 2D — door / window / item)
@@ -134,6 +242,11 @@ export function FloorplanRegistryActionMenu() {
   const handleMove = () => {
     sfxEmitter.emit('sfx:item-pick')
     setMovingNode(node as never)
+    // 2D-owned move: `FloorplanRegistryMoveOverlay` runs the whole gesture.
+    // Mark the origin (after `setMovingNode`, which resets it to null) so
+    // `ToolManager` keeps the 3D affordance mover from also adopting the node
+    // and reverting it on unmount. Mirrors the orange move-dot path.
+    setMovingNodeOrigin('2d')
     // Match the legacy 3D `floating-action-menu`: clear selection so
     // selection-gated affordances unmount during the drag. Specifically
     // the slab / ceiling boundary editor (`ToolManager` shows it when
@@ -185,12 +298,29 @@ export function FloorplanRegistryActionMenu() {
     if (!node.parentId) return
     sfxEmitter.emit('sfx:item-pick')
     useScene.temporal.getState().pause()
+    if (duplicatesAsFreshSubtree(node as AnyNode)) {
+      const draftId = createFreshPlacementSubtree(node.id as AnyNodeId)
+      const draft = draftId ? useScene.getState().nodes[draftId] : null
+      if (draft) {
+        setMovingNode(draft as never)
+        setMovingNodeOrigin('2d')
+        useScene.temporal.getState().resume()
+        return
+      }
+      useScene.temporal.getState().resume()
+      return
+    }
     const cloned = structuredClone(node) as AnyNode & { id?: AnyNodeId }
     delete (cloned as { id?: AnyNodeId }).id
     const prevMeta =
       cloned.metadata && typeof cloned.metadata === 'object' && !Array.isArray(cloned.metadata)
         ? (cloned.metadata as Record<string, unknown>)
         : {}
+    // Mark fresh + hand to the placement cursor so the copy follows the
+    // pointer and only lands on the next click — same gesture for every
+    // kind. Polyline runs (duct / pipe / lineset) ride the same path:
+    // `FloorplanRegistryMoveOverlay` translates their whole `path`, so they
+    // no longer need the old "offset + drop already-placed" special case.
     cloned.metadata = { ...prevMeta, isNew: true }
     const parsed = def.schema.parse(cloned) as AnyNode
     useScene.getState().createNode(parsed, node.parentId as AnyNodeId)
@@ -204,9 +334,20 @@ export function FloorplanRegistryActionMenu() {
     useViewer.getState().setSelection({ selectedIds: [] })
   }
 
+  const handleQuickAction = (action: NodeQuickAction) => {
+    if (action.disabled) return
+    const run = () => action.run({ node, sceneApi: createSceneApi(useScene) })
+    const result = action.history === 'single' ? runAsSingleSceneHistoryStep(useScene, run) : run()
+    if (result?.selectedIds) useViewer.getState().setSelection({ selectedIds: result.selectedIds })
+    if (result?.selectedIds) {
+      const selectedDifferentNode = result.selectedIds.some((id) => id !== node.id)
+      sfxEmitter.emit(selectedDifferentNode ? 'sfx:item-place' : 'sfx:item-pick')
+    }
+  }
+
   return createPortal(
     <div
-      className="pointer-events-none fixed z-30"
+      className="pointer-events-none fixed z-30 flex w-max flex-col items-center"
       style={{
         left: position.left,
         top: position.top,
@@ -221,6 +362,30 @@ export function FloorplanRegistryActionMenu() {
         onPointerDown={(event) => event.stopPropagation()}
         onPointerUp={(event) => event.stopPropagation()}
       />
+      {quickActions.length > 0 ? (
+        <div
+          className="pointer-events-auto mt-1 inline-flex w-max items-center justify-center gap-0.5 rounded-lg border border-border/50 bg-background/90 px-1.5 py-1 shadow-md backdrop-blur-md"
+          onPointerDown={(event) => event.stopPropagation()}
+          onPointerUp={(event) => event.stopPropagation()}
+        >
+          {quickActions.map((action) => (
+            <button
+              aria-label={action.title ?? action.label}
+              className="tooltip-trigger flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground"
+              disabled={action.disabled}
+              key={action.id}
+              onClick={() => handleQuickAction(action)}
+              title={action.title ?? action.label}
+              type="button"
+            >
+              <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-current">
+                <QuickActionIcon action={action} />
+              </span>
+              <span className="whitespace-nowrap leading-none">{action.label}</span>
+            </button>
+          ))}
+        </div>
+      ) : null}
     </div>,
     document.body,
   )