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

package/src/components/editor/wall-snap-beacon-layer.tsx

@@ -1,10 +1,24 @@
 'use client'
 
-import { sceneRegistry } from '@pascal-app/core'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  getWallCurveFrameAt,
+  getWallCurveLength,
+  getWallPlaneTop,
+  getWallThickness,
+  isCurvedWall,
+  resolveLevelId,
+  resolveWallTop,
+  sceneRegistry,
+  spatialGridManager,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
 import { useWallSnapIndicator, type WallSnapKind } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
 import { useFrame } from '@react-three/fiber'
-import { memo, useRef } from 'react'
+import { memo, useMemo, useRef } from 'react'
 import { BoxGeometry, CircleGeometry, CylinderGeometry, type Group } from 'three'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../lib/constants'
@@ -20,8 +34,8 @@ import { EDITOR_LAYER } from '../../lib/constants'
  *   intersection      → ✕ cross   wall body (edge) → circle
  *
  * Subscribes to the shared `useWallSnapIndicator` store (published by the wall
- * draft + endpoint-move tools). Shares the indigo accent of
- * `Alignment3DGuideLayer` for visual consistency.
+ * draft + endpoint-move tools). The vertical mouse pillar and the corner
+ * (endpoint) square are green; the other floor glyphs are indigo.
  *
  * The point carries only XZ (building-local plan coords); like the alignment
  * guides it's lifted to the active level's building-local Y each frame so it
@@ -30,10 +44,19 @@ import { EDITOR_LAYER } from '../../lib/constants'
  */
 
 const BEACON_COLOR = 0x81_8c_f8 // indigo-400 — matches the alignment guide accent
+const MARKER_GREEN = 0x22_c5_5e // green-500 — vertical mouse marker + corner (endpoint) glyph
 const BEACON_HEIGHT = 2.5 // world-meter height of the pillar
 const BEACON_RADIUS = 0.018 // world-meter radius of the pillar
 const MARKER = 0.13 // world-meter base size of the floor glyph
 const FLOOR_LIFT = 0.012 // tiny lift so the marker reads above the floor grid
+const WALL_TOP_HIGHLIGHT_LIFT = 0.035
+const WALL_TOP_HIGHLIGHT_HEIGHT = 0.018
+const WALL_TOP_HIGHLIGHT_OVERHANG = 0.14
+const WALL_TOP_GLOW_HEIGHT = 0.026
+const WALL_TOP_GLOW_OVERHANG = 0.36
+const WALL_TOP_END_OVERHANG = 0.08
+const CURVED_WALL_HIGHLIGHT_SEGMENT_LENGTH = 0.45
+const NO_RAYCAST = () => null
 
 // Shared resources — one material + unit geometries, so snap churn during a
 // drag doesn't rebuild GPU buffers (mirrors the alignment guide layer).
@@ -45,17 +68,49 @@ const beaconMaterial = new MeshBasicNodeMaterial({
   transparent: true,
   opacity: 0.9,
 })
+const greenMarkerMaterial = new MeshBasicNodeMaterial({
+  color: MARKER_GREEN,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+  opacity: 0.9,
+})
+const wallTopHighlightMaterial = new MeshBasicNodeMaterial({
+  color: BEACON_COLOR,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+  opacity: 0.88,
+})
+const wallTopHighlightGlowMaterial = new MeshBasicNodeMaterial({
+  color: BEACON_COLOR,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+  opacity: 0.26,
+})
 const PILLAR_GEOMETRY = new CylinderGeometry(BEACON_RADIUS, BEACON_RADIUS, BEACON_HEIGHT, 8)
 // Flat unit geometries scaled per marker. Boxes are 0.002 tall so they read as
 // a flat plate; circles/triangles lie flat via an X rotation at the mesh.
 const FLAT_BOX_GEOMETRY = new BoxGeometry(1, 0.002, 1)
+const WALL_TOP_HIGHLIGHT_GEOMETRY = new BoxGeometry(1, 1, 1)
 const TRIANGLE_GEOMETRY = new CircleGeometry(1, 3)
 const CIRCLE_GEOMETRY = new CircleGeometry(1, 28)
 
 export const WallSnapBeaconLayer = memo(function WallSnapBeaconLayer() {
   const point = useWallSnapIndicator((s) => s.point)
   const levelId = useViewer((s) => s.selection.levelId)
+  const nodes = useScene((s) => s.nodes)
   const groupRef = useRef<Group>(null)
+  const highlightedWalls = useMemo(() => {
+    if (!point?.wallIds?.length) return []
+    return point.wallIds
+      .map((wallId) => nodes[wallId as AnyNodeId])
+      .filter((node): node is WallNode => node?.type === 'wall' && node.visible !== false)
+  }, [nodes, point?.wallIds])
 
   // Track the active level's building-local Y each frame so the beacon stands
   // on the floor being edited, not the building base — same source the
@@ -70,10 +125,13 @@ export const WallSnapBeaconLayer = memo(function WallSnapBeaconLayer() {
   if (!point) return null
   return (
     <group ref={groupRef}>
+      {highlightedWalls.map((wall) => (
+        <WallTopHighlight key={wall.id} nodes={nodes} wall={wall} />
+      ))}
       <mesh
         geometry={PILLAR_GEOMETRY}
         layers={EDITOR_LAYER}
-        material={beaconMaterial}
+        material={greenMarkerMaterial}
         position={[point.x, BEACON_HEIGHT / 2, point.z]}
         renderOrder={1002}
       />
@@ -82,6 +140,104 @@ export const WallSnapBeaconLayer = memo(function WallSnapBeaconLayer() {
   )
 })
 
+type WallTopHighlightSegment = {
+  angle: number
+  center: [number, number]
+  length: number
+}
+
+function getWallTopY(wall: WallNode, nodes: Readonly<Record<string, AnyNode>>) {
+  const levelId = resolveLevelId(wall, nodes as Record<string, AnyNode>)
+  const support = spatialGridManager.getSlabSupportForWall(
+    levelId,
+    wall.start,
+    wall.end,
+    wall.curveOffset ?? 0,
+    wall.thickness,
+    wall.supportSlabId,
+  )
+  const planeTop = getWallPlaneTop(wall, levelId, nodes as Record<string, AnyNode>)
+  return resolveWallTop(wall, planeTop, support.elevation) + WALL_TOP_HIGHLIGHT_LIFT
+}
+
+function buildHighlightSegment(start: [number, number], end: [number, number]) {
+  const dx = end[0] - start[0]
+  const dz = end[1] - start[1]
+  const length = Math.hypot(dx, dz)
+  if (length < 1e-6) return null
+
+  return {
+    angle: -Math.atan2(dz, dx),
+    center: [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2] as [number, number],
+    length,
+  }
+}
+
+function buildWallTopHighlightSegments(wall: WallNode): WallTopHighlightSegment[] {
+  if (!isCurvedWall(wall)) {
+    const segment = buildHighlightSegment(wall.start, wall.end)
+    return segment ? [segment] : []
+  }
+
+  const sampleCount = Math.max(
+    8,
+    Math.ceil(getWallCurveLength(wall) / CURVED_WALL_HIGHLIGHT_SEGMENT_LENGTH),
+  )
+  const segments: WallTopHighlightSegment[] = []
+  let previous = getWallCurveFrameAt(wall, 0).point
+  for (let index = 1; index <= sampleCount; index += 1) {
+    const current = getWallCurveFrameAt(wall, index / sampleCount).point
+    const segment = buildHighlightSegment([previous.x, previous.y], [current.x, current.y])
+    if (segment) segments.push(segment)
+    previous = current
+  }
+  return segments
+}
+
+function WallTopHighlight({
+  nodes,
+  wall,
+}: {
+  nodes: Readonly<Record<string, AnyNode>>
+  wall: WallNode
+}) {
+  const segments = useMemo(() => buildWallTopHighlightSegments(wall), [wall])
+  const y = getWallTopY(wall, nodes)
+  const width = Math.max(getWallThickness(wall) + WALL_TOP_HIGHLIGHT_OVERHANG, 0.24)
+  const glowWidth = Math.max(getWallThickness(wall) + WALL_TOP_GLOW_OVERHANG, 0.42)
+
+  return (
+    <>
+      {segments.map((segment, index) => (
+        <group key={`${wall.id}:${index}`}>
+          <mesh
+            frustumCulled={false}
+            geometry={WALL_TOP_HIGHLIGHT_GEOMETRY}
+            layers={EDITOR_LAYER}
+            material={wallTopHighlightGlowMaterial}
+            position={[segment.center[0], y - 0.003, segment.center[1]]}
+            raycast={NO_RAYCAST}
+            renderOrder={1003}
+            rotation={[0, segment.angle, 0]}
+            scale={[segment.length + WALL_TOP_END_OVERHANG, WALL_TOP_GLOW_HEIGHT, glowWidth]}
+          />
+          <mesh
+            frustumCulled={false}
+            geometry={WALL_TOP_HIGHLIGHT_GEOMETRY}
+            layers={EDITOR_LAYER}
+            material={wallTopHighlightMaterial}
+            position={[segment.center[0], y + 0.002, segment.center[1]]}
+            raycast={NO_RAYCAST}
+            renderOrder={1004}
+            rotation={[0, segment.angle, 0]}
+            scale={[segment.length + WALL_TOP_END_OVERHANG, WALL_TOP_HIGHLIGHT_HEIGHT, width]}
+          />
+        </group>
+      ))}
+    </>
+  )
+}
+
 /** Floor glyph whose shape encodes which kind of geometry the point snapped to. */
 function SnapMarker({ kind, x, z }: { kind: WallSnapKind; x: number; z: number }) {
   const y = FLOOR_LIFT
@@ -90,7 +246,7 @@ function SnapMarker({ kind, x, z }: { kind: WallSnapKind; x: number; z: number }
       <mesh
         geometry={FLAT_BOX_GEOMETRY}
         layers={EDITOR_LAYER}
-        material={beaconMaterial}
+        material={greenMarkerMaterial}
         position={[x, y, z]}
         renderOrder={1001}
         scale={[MARKER * 2, 1, MARKER * 2]}

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

@@ -2,6 +2,11 @@
 
 import { memo, type MouseEvent as ReactMouseEvent } from 'react'
 import useEditor from '../../store/use-editor'
+import {
+  useEndpointReshape,
+  useIsCurveReshape,
+  useMovingNode,
+} from '../../store/use-interaction-scope'
 import { NodeActionMenu } from '../editor/node-action-menu'
 
 type SvgPoint = {
@@ -48,12 +53,11 @@ export const FloorplanActionMenuLayer = memo(function FloorplanActionMenuLayer({
   offsetY = 10,
 }: FloorplanActionMenuLayerProps) {
   const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered)
-  const movingNode = useEditor((state) => state.movingNode)
-  const movingFenceEndpoint = useEditor((state) => state.movingFenceEndpoint)
-  const curvingWall = useEditor((state) => state.curvingWall)
-  const curvingFence = useEditor((state) => state.curvingFence)
+  const movingNode = useMovingNode()
+  const endpointReshape = useEndpointReshape()
+  const isCurveReshape = useIsCurveReshape()
 
-  if (!isFloorplanHovered || movingNode || movingFenceEndpoint || curvingWall || curvingFence) {
+  if (!isFloorplanHovered || movingNode || endpointReshape || isCurveReshape) {
     return null
   }
 

package/src/components/editor-2d/floorplan-alignment-guide-layer.tsx

@@ -28,6 +28,7 @@ import { useFloorplanRender } from './floorplan-render-context'
 export const FloorplanAlignmentGuideLayer = memo(function FloorplanAlignmentGuideLayer() {
   const guides = useAlignmentGuides((s) => s.guides)
   const unit = useViewer((s) => s.unit)
+  const metricNotation = useViewer((s) => s.metricNotation)
   const ctx = useFloorplanRender()
 
   if (guides.length === 0) return null
@@ -61,7 +62,7 @@ export const FloorplanAlignmentGuideLayer = memo(function FloorplanAlignmentGuid
         // offset along X.
         const pillX = axis === 'x' ? midX + pillOffset : midX
         const pillZ = axis === 'z' ? midZ + pillOffset : midZ
-        const distLabel = formatMeasurement(distMeters, unit)
+        const distLabel = formatMeasurement(distMeters, unit, metricNotation)
         const charWidth = pillFontSize * 0.55
         const pillWidth = distLabel.length * charWidth + pillPadX * 2
         const pillHeight = pillFontSize + pillPadY * 2

package/src/components/editor-2d/floorplan-cursor-indicator-overlay.tsx

@@ -1,15 +1,16 @@
 'use client'
 
 import { Icon } from '@iconify/react'
-import { memo, useMemo } from 'react'
+import { memo, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import useEditor, { type FloorplanSelectionTool } from '../../store/use-editor'
+import { useFloorplanDraftPreview } from '../../store/use-floorplan-draft-preview'
 import { furnishTools } from '../ui/action-menu/furnish-tools'
 import { tools as structureTools } from '../ui/action-menu/structure-tools'
-
-type SvgPoint = {
-  x: number
-  y: number
-}
+import {
+  type FloorplanCursorPoint,
+  projectFloorplanCursorPoint,
+  resolveFloorplanCursorIndicatorPosition,
+} from './floorplan-cursor-indicator-position'
 
 type FloorplanCursorIndicator =
   | {
@@ -22,7 +23,7 @@ type FloorplanCursorIndicator =
     }
 
 type FloorplanCursorIndicatorOverlayProps = {
-  cursorPosition: SvgPoint | null
+  cursorPosition: FloorplanCursorPoint | null
   floorplanSelectionTool: FloorplanSelectionTool
   movingOpeningType: 'door' | 'window' | null
   isPanning: boolean
@@ -46,6 +47,10 @@ export const FloorplanCursorIndicatorOverlay = memo(function FloorplanCursorIndi
   const tool = useEditor((state) => state.tool)
   const structureLayer = useEditor((state) => state.structureLayer)
   const catalogCategory = useEditor((state) => state.catalogCategory)
+  const cursorPoint = useFloorplanDraftPreview((state) => state.cursorPoint)
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const [projectedCursorPosition, setProjectedCursorPosition] =
+    useState<FloorplanCursorPoint | null>(null)
 
   const activeFloorplanToolConfig = useMemo(() => {
     if (movingOpeningType) {
@@ -77,13 +82,38 @@ export const FloorplanCursorIndicatorOverlay = memo(function FloorplanCursorIndi
     }
 
     if (mode === 'material-paint') {
-      return { kind: 'asset', iconSrc: '/icons/paint.png' }
+      return { kind: 'asset', iconSrc: '/icons/paint.webp' }
     }
 
     return null
   }, [activeFloorplanToolConfig, floorplanSelectionTool, mode, structureLayer])
 
-  const position = cursorPosition
+  useLayoutEffect(() => {
+    const anchor = anchorRef.current
+    const overlayHost = anchor?.parentElement
+    const scene = overlayHost?.querySelector<SVGGElement>('[data-floorplan-scene]')
+    const sceneToViewport = scene?.getScreenCTM()
+
+    if (!(cursorPoint && cursorPosition && overlayHost && sceneToViewport)) {
+      setProjectedCursorPosition(null)
+      return
+    }
+
+    const overlayRect = overlayHost.getBoundingClientRect()
+    const nextPosition = projectFloorplanCursorPoint(cursorPoint, sceneToViewport, {
+      x: overlayRect.left,
+      y: overlayRect.top,
+    })
+    setProjectedCursorPosition((currentPosition) =>
+      currentPosition &&
+      currentPosition.x === nextPosition.x &&
+      currentPosition.y === nextPosition.y
+        ? currentPosition
+        : nextPosition,
+    )
+  }, [cursorPoint, cursorPosition])
+
+  const position = resolveFloorplanCursorIndicatorPosition(cursorPosition, projectedCursorPosition)
 
   if (!(indicator && position) || isPanning) {
     return null
@@ -93,6 +123,7 @@ export const FloorplanCursorIndicatorOverlay = memo(function FloorplanCursorIndi
     <div
       aria-hidden="true"
       className="pointer-events-none absolute z-20"
+      ref={anchorRef}
       style={{ left: position.x, top: position.y }}
     >
       {mode === 'delete' ? (

package/src/components/editor-2d/floorplan-cursor-indicator-position.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'bun:test'
+import {
+  projectFloorplanCursorPoint,
+  resolveFloorplanCursorIndicatorPosition,
+} from './floorplan-cursor-indicator-position'
+
+describe('projectFloorplanCursorPoint', () => {
+  test('projects a snapped plan point into overlay-local screen coordinates', () => {
+    expect(
+      projectFloorplanCursorPoint(
+        [3, 4],
+        {
+          a: 0,
+          b: 10,
+          c: -10,
+          d: 0,
+          e: 128,
+          f: 40,
+        },
+        { x: 30, y: 20 },
+      ),
+    ).toEqual({ x: 58, y: 50 })
+  })
+
+  test('anchors the placement pin to the projected snap point instead of the raw pointer', () => {
+    expect(resolveFloorplanCursorIndicatorPosition({ x: 88, y: 97 }, { x: 58, y: 70 })).toEqual({
+      x: 58,
+      y: 70,
+    })
+  })
+})

package/src/components/editor-2d/floorplan-cursor-indicator-position.ts

@@ -0,0 +1,39 @@
+export type FloorplanCursorPoint = {
+  x: number
+  y: number
+}
+
+type Matrix2D = {
+  a: number
+  b: number
+  c: number
+  d: number
+  e: number
+  f: number
+}
+
+export function projectFloorplanCursorPoint(
+  point: readonly [number, number],
+  sceneToViewport: Matrix2D,
+  overlayOrigin: FloorplanCursorPoint,
+): FloorplanCursorPoint {
+  return {
+    x:
+      sceneToViewport.a * point[0] +
+      sceneToViewport.c * point[1] +
+      sceneToViewport.e -
+      overlayOrigin.x,
+    y:
+      sceneToViewport.b * point[0] +
+      sceneToViewport.d * point[1] +
+      sceneToViewport.f -
+      overlayOrigin.y,
+  }
+}
+
+export function resolveFloorplanCursorIndicatorPosition(
+  cursorPosition: FloorplanCursorPoint | null,
+  projectedCursorPosition: FloorplanCursorPoint | null,
+): FloorplanCursorPoint | null {
+  return projectedCursorPosition ?? cursorPosition
+}

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

@@ -0,0 +1,87 @@
+'use client'
+
+import { useViewer } from '@pascal-app/viewer'
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { isActive } from '../../lib/interaction/scope'
+import useEditor from '../../store/use-editor'
+import useInteractionScope, { useMovingNode } from '../../store/use-interaction-scope'
+import {
+  deleteSelection,
+  duplicateSelectionAndPickUp,
+  startGroupPickUp,
+} from '../editor/group-actions'
+import { NodeActionMenu } from '../editor/node-action-menu'
+
+/**
+ * Floating Move / Duplicate / Delete pill for a MULTI-selection in the 2D
+ * floor plan — the group sibling of `FloorplanRegistryActionMenu` (which is
+ * sole-selection only). Anchored above the dashed group selection box; every
+ * action targets the whole selection: Move picks the group up (it rides the
+ * cursor until a click places it), Duplicate clones the selection and picks
+ * the clones up, Delete removes everything selected.
+ *
+ * Gated on floorplan hover so it never coexists with the 3D group menu in
+ * split view (that one hides while the floor plan is hovered), and hidden
+ * during any active interaction so it never competes with a live drag.
+ */
+export function FloorplanGroupActionMenu() {
+  const isMultiSelect = useViewer((s) => s.selection.selectedIds.length > 1)
+  const movingNode = useMovingNode()
+  const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered)
+  const scopeActive = useInteractionScope((s) => isActive(s.scope))
+
+  const [position, setPosition] = useState<{ left: number; top: number } | null>(null)
+
+  const isVisible = isMultiSelect && !movingNode && isFloorplanHovered && !scopeActive
+
+  useEffect(() => {
+    if (!isVisible) {
+      setPosition(null)
+      return
+    }
+    let raf = 0
+    const tick = () => {
+      raf = requestAnimationFrame(tick)
+      // The dashed group box exists exactly while the multi-selection has
+      // transformable participants — anchor to its top edge. Only publish
+      // actual changes so the idle poll doesn't re-render every frame.
+      const box = document.querySelector('[data-group-selection-box]') as SVGGElement | null
+      if (!box) {
+        setPosition((prev) => (prev === null ? prev : null))
+        return
+      }
+      const rect = box.getBoundingClientRect()
+      const next = { left: rect.left + rect.width / 2, top: rect.top }
+      setPosition((prev) =>
+        prev && Math.abs(prev.left - next.left) < 0.5 && Math.abs(prev.top - next.top) < 0.5
+          ? prev
+          : next,
+      )
+    }
+    raf = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(raf)
+  }, [isVisible])
+
+  if (!(isVisible && position)) return null
+
+  return createPortal(
+    <div
+      className="pointer-events-none fixed z-30"
+      style={{
+        left: position.left,
+        top: position.top,
+        transform: 'translate(-50%, calc(-100% - 12px))',
+      }}
+    >
+      <NodeActionMenu
+        onDelete={() => deleteSelection()}
+        onDuplicate={() => duplicateSelectionAndPickUp()}
+        onMove={() => startGroupPickUp()}
+        onPointerDown={(event) => event.stopPropagation()}
+        onPointerUp={(event) => event.stopPropagation()}
+      />
+    </div>,
+    document.body,
+  )
+}