@pascal-app/editor 1.0.5 → 1.0.7

package/src/components/editor-2d/floorplan-snap-beacon-layer.tsx

@@ -13,33 +13,92 @@ import { useFloorplanRender } from './floorplan-render-context'
  *
  *   endpoint (corner) → square    midpoint → triangle
  *   intersection      → ✕ cross   wall body (edge) → circle
+ *   perpendicular     → ⊥ corner  projection guide → diamond
+ *   grid length       → small +
  *
  * Indigo to match the 3D beacon, except the corner (endpoint) square which is
- * green to match the alignment guides. Sizes are pixel-budgeted via
- * `unitsPerPixel` so the marker stays a
+ * green to match the alignment guides. A point that carries a `label` (a wall
+ * pulled from a wall end) also names what it caught in a pill beside the
+ * glyph. Sizes are pixel-budgeted via `unitsPerPixel` so the marker stays a
  * constant size on screen at any zoom. Mounted inside the `data-floorplan-scene`
  * group so coordinates are world meters (XZ) 1:1, like the alignment guides.
  */
 const COLOR = '#6366f1' // indigo-500 — matches the 3D beacon
 const ENDPOINT_COLOR = '#22c55e' // green-500 — corner (endpoint) snap accent
 
-export const FloorplanSnapBeaconLayer = memo(function FloorplanSnapBeaconLayer() {
+export const FloorplanSnapBeaconLayer = memo(function FloorplanSnapBeaconLayer({
+  unitsPerPixel,
+}: {
+  /** The plan's live scale, which keeps a labelled marker screen-sized. */
+  unitsPerPixel?: number
+}) {
   const point = useWallSnapIndicator((s) => s.point)
   const ctx = useFloorplanRender()
 
   if (!point) return null
 
-  const upp = ctx?.unitsPerPixel ?? 0.01
+  // A labelled point (a wall pulled from a wall end) is sized on screen.
+  const upp = (point.label ? unitsPerPixel : undefined) ?? ctx?.unitsPerPixel ?? 0.01
   const m = 6 * upp // base half-size of the glyph in world meters
   const stroke = 1.5 * upp
 
   return (
     <g pointerEvents="none">
       <SnapMarker color={COLOR} kind={point.kind} m={m} stroke={stroke} x={point.x} z={point.z} />
+      {point.label ? (
+        <SnapLabel
+          color={point.kind === 'endpoint' ? ENDPOINT_COLOR : COLOR}
+          sceneRotationDeg={ctx?.sceneRotationDeg ?? 0}
+          text={point.label}
+          upp={upp}
+          x={point.x}
+          z={point.z}
+        />
+      ) : null}
     </g>
   )
 })
 
+/** What the snap caught, in a pill down and to the right of the glyph, kept upright. */
+function SnapLabel({
+  color,
+  sceneRotationDeg,
+  text,
+  upp,
+  x,
+  z,
+}: {
+  color: string
+  sceneRotationDeg: number
+  text: string
+  upp: number
+  x: number
+  z: number
+}) {
+  const fontSize = 10.5 * upp
+  const padX = 5 * upp
+  const width = text.length * fontSize * 0.56 + padX * 2
+  const height = fontSize + 6 * upp
+  return (
+    <g
+      transform={`translate(${x} ${z}) rotate(${-sceneRotationDeg}) translate(${12 * upp} ${16 * upp})`}
+    >
+      <rect fill={color} height={height} rx={3 * upp} width={width} x={0} y={-height / 2} />
+      <text
+        dominantBaseline="middle"
+        fill="#ffffff"
+        fontFamily="-apple-system, system-ui, sans-serif"
+        fontSize={fontSize}
+        fontWeight={600}
+        x={padX}
+        y={0}
+      >
+        {text}
+      </text>
+    </g>
+  )
+}
+
 function SnapMarker({
   color,
   kind,
@@ -72,6 +131,39 @@ function SnapMarker({
       </g>
     )
   }
+  if (kind === 'perpendicular') {
+    // ⊥ — a base line with an upright from its middle, and the square corner.
+    const c = m * 1.3
+    return (
+      <g fill="none" stroke={color} strokeLinecap="round" strokeWidth={stroke * 1.6}>
+        <line x1={x - c} x2={x + c} y1={z} y2={z} />
+        <line x1={x} x2={x} y1={z} y2={z - c * 1.4} />
+        <polyline
+          points={`${x + c * 0.5},${z} ${x + c * 0.5},${z - c * 0.5} ${x},${z - c * 0.5}`}
+        />
+      </g>
+    )
+  }
+  if (kind === 'alignment') {
+    const c = m * 1.2
+    return (
+      <polygon
+        fill="#ffffff"
+        points={`${x},${z - c} ${x + c},${z} ${x},${z + c} ${x - c},${z}`}
+        stroke={color}
+        strokeWidth={stroke * 1.4}
+      />
+    )
+  }
+  if (kind === 'grid') {
+    const c = m * 0.9
+    return (
+      <g stroke={color} strokeLinecap="round" strokeWidth={stroke * 1.4}>
+        <line x1={x - c} x2={x + c} y1={z} y2={z} />
+        <line x1={x} x2={x} y1={z - c} y2={z + c} />
+      </g>
+    )
+  }
   // 'wall' (edge / along-wall) → circle
   return <circle cx={x} cy={z} fill={color} r={m} />
 }

package/src/components/editor-2d/renderers/floorplan-dimension-edit-overlay.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { AnyNode, AnyNodeId } from '@pascal-app/core'
-import { useScene } from '@pascal-app/core'
+import { useLocale, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
@@ -11,6 +11,7 @@ import {
   resolveDimensionDrive,
 } from '../../../lib/floorplan/dimension-drive'
 import { formatScheduleLength } from '../../../lib/floorplan/schedules'
+import { commitRoomPush } from '../../../lib/room-handle-drag'
 import useEditor from '../../../store/use-editor'
 
 /**
@@ -20,7 +21,8 @@ import useEditor from '../../../store/use-editor'
  * plate, pre-filled with the current text. Enter commits, Esc cancels.
  * Committing DRIVES geometry: the anchor the dimension runs toward moves
  * along the dimension direction by the delta, and connected wall junctions
- * follow (`planDimensionDrive`). When nothing bindable is under the far
+ * follow (`planDimensionDrive`); a dimension across a wall slides the whole
+ * wall, as its push arrow does (`commitRoomPush`). When nothing bindable is under the far
  * anchor the value is written as `textOverride` on a construction-dimension
  * node instead, and the label renders an "override" badge.
  *
@@ -60,6 +62,32 @@ export function useDimensionEditAllowed(): boolean {
   return useEditor((state) => isDimensionEditAllowed(state, { readOnly }))
 }
 
+/**
+ * The typeable dimension value under a press, with the node typing it drives:
+ * the pressed element's or, when the plan's dashed group box lies over it, the
+ * one beneath (a multi-selection's walls keep their dimensions inside it).
+ */
+export function typeableDimensionAt(
+  target: EventTarget | null,
+  clientX: number,
+  clientY: number,
+): { label: Element; ownerNodeId: AnyNodeId } | null {
+  const resolve = (element: Element | null | undefined) => {
+    const hit = element?.closest?.('[data-floorplan-dimension-hit]')
+    const label = hit?.closest('[data-floorplan-annotation-label]')
+    const ownerNodeId = hit?.closest('[data-node-id]')?.getAttribute('data-node-id')
+    return label && ownerNodeId ? { label, ownerNodeId: ownerNodeId as AnyNodeId } : null
+  }
+  const element = target as Element | null
+  const direct = resolve(element)
+  if (direct || !element?.closest?.('[data-group-selection-box]')) return direct
+  for (const below of document.elementsFromPoint(clientX, clientY)) {
+    const found = resolve(below)
+    if (found) return found
+  }
+  return null
+}
+
 type EditTarget = {
   ownerNodeId: AnyNodeId
   text: string
@@ -78,6 +106,7 @@ export function FloorplanDimensionEditOverlay(): React.ReactElement | null {
   const [error, setError] = useState<string | null>(null)
   const inputRef = useRef<HTMLInputElement | null>(null)
   const unit = useViewer((state) => state.unit)
+  const locale = useLocale()
 
   useEffect(() => {
     let down: { x: number; y: number } | null = null
@@ -92,13 +121,9 @@ export function FloorplanDimensionEditOverlay(): React.ReactElement | null {
         return
       }
       if (!isDimensionEditAllowed(useEditor.getState(), useScene.getState())) return
-      const origin = event.target as Element | null
-      const hit = origin?.closest?.('[data-floorplan-dimension-hit]')
-      if (!hit) return
-      const label = hit.closest('[data-floorplan-annotation-label]')
-      const owner = hit.closest('[data-node-id]')
-      const ownerNodeId = owner?.getAttribute('data-node-id')
-      if (!label || !ownerNodeId) return
+      const found = typeableDimensionAt(event.target, event.clientX, event.clientY)
+      if (!found) return
+      const { label, ownerNodeId } = found
 
       const value = number(label.getAttribute('data-floorplan-dimension-value'))
       const witnessStart = point(
@@ -116,7 +141,7 @@ export function FloorplanDimensionEditOverlay(): React.ReactElement | null {
       const box = label.getBoundingClientRect()
       const text = label.getAttribute('data-floorplan-dimension-text') ?? ''
       setTarget({
-        ownerNodeId: ownerNodeId as AnyNodeId,
+        ownerNodeId,
         text,
         value,
         witnessStart,
@@ -154,7 +179,7 @@ export function FloorplanDimensionEditOverlay(): React.ReactElement | null {
 
   const commit = useCallback(() => {
     if (!target) return
-    const nextLength = parseDimensionInput(draft, unit)
+    const nextLength = parseDimensionInput(draft, unit, locale)
     if (nextLength === null) {
       setError(`Cannot read "${draft.trim()}"`)
       return
@@ -166,7 +191,7 @@ export function FloorplanDimensionEditOverlay(): React.ReactElement | null {
     }
     setTarget(null)
     setError(null)
-  }, [draft, target, unit])
+  }, [draft, locale, target, unit])
 
   if (!target) return null
   if (typeof document === 'undefined') return null
@@ -246,6 +271,21 @@ export function commitDimensionValue(args: {
     return { ok: true }
   }
 
+  if (resolution.target.kind === 'wall-offset') {
+    // The wall's own push: the whole wall slides along its normal, connected
+    // walls follow through the junction planner, rooms and floors re-form —
+    // one undo step, exactly as dragging its side arrow that far.
+    const delta = args.nextLength - args.target.value
+    if (Math.abs(delta) < 1e-9) return { ok: true }
+    return commitRoomPush(
+      { wallId: resolution.target.wallId, t0: 0, t1: 1 },
+      resolution.target.direction,
+      delta,
+    )
+      ? { ok: true }
+      : { ok: false, reason: "Can't move this wall there" }
+  }
+
   const plan = planDimensionDrive({
     nodes,
     target: resolution.target,

package/src/components/editor-2d/renderers/floorplan-registry-layer.test.ts

@@ -24,6 +24,7 @@ import {
   collectFloorplanLinkedLevelNodes,
   computeAffectedSiblingIds,
   floorplanAffordanceReshapeScope,
+  floorplanEntryStripsHandles,
   floorplanEntryYieldsToTool,
   floorplanHandleDoubleClickAffordance,
   InteractiveGeometry,
@@ -162,7 +163,6 @@ describe('site-scoped floorplan discovery', () => {
       siblingEpoch: 0,
       unit: 'metric' as const,
       metricNotation: 'meters' as const,
-      wallDimensionReference: 'finished-faces' as const,
       visibilityRootId: site.id,
     }
     const committedSnapshot = structuredClone(overlay)
@@ -793,6 +793,17 @@ describe('floorplan entry routing while a tool is active', () => {
     expect(floorplanEntryYieldsToTool({ mode: 'select', openingPlacement: false })).toBe(false)
     expect(floorplanEntryYieldsToTool({ mode: 'delete', openingPlacement: false })).toBe(false)
   })
+
+  // A roof plane selected before arming the roof tool kept its live corner and edge handles: a
+  // click near its eave resized it instead of drawing.
+  test('a selected node shows no edit handles while a build tool is armed', () => {
+    const entry = { multiSelected: false, ceilingWithoutSession: false }
+    expect(floorplanEntryStripsHandles({ ...entry, mode: 'select' })).toBe(false)
+    expect(floorplanEntryStripsHandles({ ...entry, mode: 'build' })).toBe(true)
+    expect(floorplanEntryStripsHandles({ ...entry, mode: 'select', multiSelected: true })).toBe(
+      true,
+    )
+  })
 })
 
 describe('isFloorplanHierarchyVisible', () => {