@pascal-app/editor 1.0.3 → 1.0.4

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

@@ -0,0 +1,278 @@
+'use client'
+
+import type { AnyNode, AnyNodeId } from '@pascal-app/core'
+import { useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import {
+  parseDimensionInput,
+  planDimensionDrive,
+  resolveDimensionDrive,
+} from '../../../lib/floorplan/dimension-drive'
+import { formatScheduleLength } from '../../../lib/floorplan/schedules'
+import useEditor from '../../../store/use-editor'
+
+/**
+ * Click-to-type dimensions — WS3.
+ *
+ * Single-clicking a dimension label opens an inline input over the label
+ * 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
+ * anchor the value is written as `textOverride` on a construction-dimension
+ * node instead, and the label renders an "override" badge.
+ *
+ * The label is found by DOM delegation on the attributes
+ * `floorplan-dimension-renderer.tsx` emits, so this works identically for
+ * `dimension` and `dimension-string` geometry, for automatic wall dimensions,
+ * contextual dimensions and manual construction-dimension nodes — and on
+ * sheets, which mount the same renderer.
+ */
+
+type EditGateEditorState = Pick<
+  ReturnType<typeof useEditor.getState>,
+  'workspaceMode' | 'mode' | 'isPreviewMode' | 'isCaptureMode' | 'isFirstPersonMode'
+>
+
+/**
+ * Typing a dimension moves geometry, so it is only offered on an editable
+ * scene in idle select mode — never in studio, sheets, preview, capture or
+ * read-only (which is how version preview locks the graph).
+ */
+export function isDimensionEditAllowed(
+  editor: EditGateEditorState,
+  scene: { readOnly: boolean },
+): boolean {
+  return (
+    editor.workspaceMode === 'edit' &&
+    editor.mode === 'select' &&
+    !editor.isPreviewMode &&
+    !editor.isCaptureMode &&
+    !editor.isFirstPersonMode &&
+    !scene.readOnly
+  )
+}
+
+export function useDimensionEditAllowed(): boolean {
+  const readOnly = useScene((state) => state.readOnly)
+  return useEditor((state) => isDimensionEditAllowed(state, { readOnly }))
+}
+
+type EditTarget = {
+  ownerNodeId: AnyNodeId
+  text: string
+  value: number
+  witnessStart: [number, number]
+  witnessEnd: [number, number]
+  rect: { left: number; top: number; width: number; height: number }
+}
+
+const MIN_INPUT_WIDTH_PX = 76
+const CLICK_SLOP_PX = 4
+
+export function FloorplanDimensionEditOverlay(): React.ReactElement | null {
+  const [target, setTarget] = useState<EditTarget | null>(null)
+  const [draft, setDraft] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const unit = useViewer((state) => state.unit)
+
+  useEffect(() => {
+    let down: { x: number; y: number } | null = null
+    const onPointerDown = (event: PointerEvent) => {
+      down = { x: event.clientX, y: event.clientY }
+    }
+    const onClick = (event: MouseEvent) => {
+      if (event.button !== 0 || event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
+        return
+      }
+      if (down && Math.hypot(event.clientX - down.x, event.clientY - down.y) > CLICK_SLOP_PX) {
+        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 value = number(label.getAttribute('data-floorplan-dimension-value'))
+      const witnessStart = point(
+        label.getAttribute('data-floorplan-dimension-witness-start-x'),
+        label.getAttribute('data-floorplan-dimension-witness-start-y'),
+      )
+      const witnessEnd = point(
+        label.getAttribute('data-floorplan-dimension-witness-end-x'),
+        label.getAttribute('data-floorplan-dimension-witness-end-y'),
+      )
+      if (value === null || !witnessStart || !witnessEnd) return
+
+      event.preventDefault()
+      event.stopPropagation()
+      const box = label.getBoundingClientRect()
+      const text = label.getAttribute('data-floorplan-dimension-text') ?? ''
+      setTarget({
+        ownerNodeId: ownerNodeId as AnyNodeId,
+        text,
+        value,
+        witnessStart,
+        witnessEnd,
+        rect: {
+          left: box.left + box.width / 2,
+          top: box.top + box.height / 2,
+          width: Math.max(MIN_INPUT_WIDTH_PX, box.width + 24),
+          height: Math.max(22, box.height + 6),
+        },
+      })
+      setDraft(text)
+      setError(null)
+    }
+
+    // Document, not window: drag and marquee handlers swallow the click that
+    // ends them with a window capture listener registered after this one, and
+    // only a listener further down the capture path is skipped by it.
+    document.addEventListener('pointerdown', onPointerDown, true)
+    document.addEventListener('click', onClick, true)
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown, true)
+      document.removeEventListener('click', onClick, true)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!target) return
+    const frame = requestAnimationFrame(() => {
+      inputRef.current?.focus()
+      inputRef.current?.select()
+    })
+    return () => cancelAnimationFrame(frame)
+  }, [target])
+
+  const commit = useCallback(() => {
+    if (!target) return
+    const nextLength = parseDimensionInput(draft, unit)
+    if (nextLength === null) {
+      setError(`Cannot read "${draft.trim()}"`)
+      return
+    }
+    const outcome = commitDimensionValue({ target, nextLength, unit })
+    if (!outcome.ok) {
+      setError(outcome.reason)
+      return
+    }
+    setTarget(null)
+    setError(null)
+  }, [draft, target, unit])
+
+  if (!target) return null
+  if (typeof document === 'undefined') return null
+
+  return createPortal(
+    <div
+      className="pointer-events-none fixed inset-0 z-[70]"
+      data-floorplan-dimension-edit-overlay=""
+    >
+      <div
+        className="pointer-events-auto absolute -translate-x-1/2 -translate-y-1/2"
+        style={{ left: target.rect.left, top: target.rect.top, width: target.rect.width }}
+      >
+        <input
+          className="w-full rounded-sm border border-primary bg-card px-1 py-0.5 text-center font-mono text-foreground text-xs shadow-sm outline-none"
+          onBlur={() => setTarget(null)}
+          onChange={(event) => {
+            setDraft(event.target.value)
+            setError(null)
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault()
+              commit()
+            } else if (event.key === 'Escape') {
+              event.preventDefault()
+              setTarget(null)
+              setError(null)
+            }
+            event.stopPropagation()
+          }}
+          ref={inputRef}
+          spellCheck={false}
+          value={draft}
+        />
+        {error ? (
+          <div className="mt-0.5 whitespace-nowrap rounded-sm bg-card px-1 text-[10px] text-destructive shadow-sm">
+            {error}
+          </div>
+        ) : null}
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+type CommitOutcome = { ok: true } | { ok: false; reason: string }
+
+/**
+ * Apply a typed dimension value. Exported for tests — it is the seam between
+ * the pure drive math and the scene store.
+ */
+export function commitDimensionValue(args: {
+  target: Pick<EditTarget, 'ownerNodeId' | 'witnessStart' | 'witnessEnd' | 'value'>
+  nextLength: number
+  unit?: 'metric' | 'imperial'
+}): CommitOutcome {
+  const store = useScene.getState()
+  const nodes = store.nodes as Readonly<Record<string, AnyNode>>
+  const resolution = resolveDimensionDrive({
+    nodes,
+    ownerNodeId: args.target.ownerNodeId,
+    start: args.target.witnessStart,
+    end: args.target.witnessEnd,
+  })
+
+  if (!resolution.drivable) {
+    // Fallback: annotate rather than move. Only a construction-dimension
+    // node can carry an override — anything else has nowhere to put it.
+    const owner = nodes[args.target.ownerNodeId]
+    if (owner?.type !== 'construction-dimension') {
+      return { ok: false, reason: `Not drivable — ${resolution.reason}` }
+    }
+    store.updateNode(args.target.ownerNodeId, {
+      textOverride: formatScheduleLength(args.nextLength, args.unit ?? 'imperial'),
+    } as Partial<AnyNode>)
+    return { ok: true }
+  }
+
+  const plan = planDimensionDrive({
+    nodes,
+    target: resolution.target,
+    currentLength: args.target.value,
+    nextLength: args.nextLength,
+  })
+  if (!plan) return { ok: false, reason: 'Value would collapse the geometry' }
+  if (plan.updates.length === 0) return { ok: true }
+
+  const changes = plan.updates.map((update) => ({
+    id: update.id,
+    data: update.data as Partial<AnyNode>,
+  }))
+  if (store.applyNodeChanges) store.applyNodeChanges({ update: changes })
+  else for (const change of changes) store.updateNode(change.id, change.data)
+  for (const change of changes) store.markDirty(change.id)
+  return { ok: true }
+}
+
+function number(value: string | null): number | null {
+  if (value === null) return null
+  const parsed = Number.parseFloat(value)
+  return Number.isFinite(parsed) ? parsed : null
+}
+
+function point(x: string | null, y: string | null): [number, number] | null {
+  const parsedX = number(x)
+  const parsedY = number(y)
+  return parsedX === null || parsedY === null ? null : [parsedX, parsedY]
+}

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

@@ -1,4 +1,5 @@
 import type { FloorplanGeometry, FloorplanPoint } from '@pascal-app/core'
+import { useDimensionEditAllowed } from './floorplan-dimension-edit-overlay'
 import { resolveFloorplanLabelAngle } from './floorplan-label-angle'
 
 const EXTENSION_START_GAP = 0.075
@@ -21,6 +22,22 @@ const SQRT_ONE_HALF = Math.SQRT1_2
 
 type FloorplanDimensionRenderMode = 'screen' | 'pdf'
 
+/**
+ * Click-to-type dimensions (WS3).
+ *
+ * On screen the label plate carries an invisible hit rect plus the data the
+ * editing layer needs to drive geometry from a typed value. The layer picks
+ * it up by DOM delegation (`FloorplanDimensionEditOverlay` below), so every
+ * producer of `dimension` / `dimension-string` geometry — wall automatic
+ * dimensions, contextual dimensions, manual construction-dimension nodes —
+ * becomes editable without each one wiring up a callback.
+ *
+ * Witness points are the measured feature points in level-plan metres; the
+ * value is the length the label actually reads (dimension-line points when
+ * the producer supplied them, witness points otherwise).
+ */
+export const FLOORPLAN_DIMENSION_HIT_ATTRIBUTE = 'data-floorplan-dimension-hit'
+
 type DimensionGeometry = Extract<FloorplanGeometry, { kind: 'dimension' }>
 type DimensionStringGeometry = Extract<FloorplanGeometry, { kind: 'dimension-string' }>
 type DimensionTerminator = NonNullable<DimensionGeometry['terminator']>
@@ -289,10 +306,20 @@ export function FloorplanDimensionRenderer({
         data-floorplan-dimension-start-y={layout.dimensionStart[1]}
         data-floorplan-dimension-end-x={layout.dimensionEnd[0]}
         data-floorplan-dimension-end-y={layout.dimensionEnd[1]}
+        data-floorplan-dimension-text={geometry.text}
+        data-floorplan-dimension-value={dimensionLabelValue(layout)}
+        data-floorplan-dimension-witness-start-x={geometry.start[0]}
+        data-floorplan-dimension-witness-start-y={geometry.start[1]}
+        data-floorplan-dimension-witness-end-x={geometry.end[0]}
+        data-floorplan-dimension-witness-end-y={geometry.end[1]}
         transform={labelTransform}
       >
         <DimensionLabel
           fontSize={labelFontSize}
+          // `overridden` is declared on the geometry union in
+          // packages/core/src/registry/types.ts; the cast keeps this file
+          // compiling against a core dist built before that field landed.
+          overridden={(geometry as { overridden?: boolean }).overridden === true}
           renderMode={renderMode}
           stroke={stroke}
           text={geometry.text}
@@ -464,6 +491,12 @@ export function FloorplanDimensionStringRenderer({
               data-floorplan-dimension-start-y={layout.dimensionStart[1]}
               data-floorplan-dimension-end-x={layout.dimensionEnd[0]}
               data-floorplan-dimension-end-y={layout.dimensionEnd[1]}
+              data-floorplan-dimension-text={segment.text}
+              data-floorplan-dimension-value={dimensionLabelValue(layout)}
+              data-floorplan-dimension-witness-start-x={segment.start[0]}
+              data-floorplan-dimension-witness-start-y={segment.start[1]}
+              data-floorplan-dimension-witness-end-x={segment.end[0]}
+              data-floorplan-dimension-witness-end-y={segment.end[1]}
               transform={labelTransform}
             >
               <DimensionLabel
@@ -481,6 +514,14 @@ export function FloorplanDimensionStringRenderer({
   )
 }
 
+/** The length the label reads — the dimension-line span, offset cancels out. */
+function dimensionLabelValue(layout: ArchitecturalDimensionLayout): number {
+  return Math.hypot(
+    layout.dimensionEnd[0] - layout.dimensionStart[0],
+    layout.dimensionEnd[1] - layout.dimensionStart[1],
+  )
+}
+
 function rotateVector(vector: FloorplanPoint, radians: number): FloorplanPoint {
   const cosine = Math.cos(radians)
   const sine = Math.sin(radians)
@@ -493,17 +534,21 @@ function DimensionLabel({
   fontSize,
   stroke,
   renderMode,
+  overridden = false,
 }: {
   text: string
   y: number
   fontSize: number
   stroke: string
   renderMode: FloorplanDimensionRenderMode
+  /** Draws the "override" badge when the value could not drive geometry. */
+  overridden?: boolean
 }) {
   const width = Math.max(fontSize, text.length * fontSize * LABEL_CHARACTER_WIDTH_RATIO)
   const plateWidth = width + fontSize * 0.5
   const plateHeight = fontSize * 1.2
   const plateY = y - fontSize * 0.82
+  const editable = useDimensionEditAllowed()
 
   return (
     <>
@@ -535,6 +580,38 @@ function DimensionLabel({
       >
         {text}
       </text>
+      {overridden && renderMode !== 'pdf' ? (
+        <text
+          fill={stroke}
+          fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
+          fontSize={fontSize * 0.62}
+          opacity={0.75}
+          paintOrder="stroke"
+          stroke="#ffffff"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          textAnchor="middle"
+          vectorEffect="non-scaling-stroke"
+          x={0}
+          y={y + fontSize * 0.86}
+        >
+          override
+        </text>
+      ) : null}
+      {renderMode === 'pdf' || !editable ? null : (
+        // Invisible click target on the plate. `pointer-events` is inherited
+        // from the dimension group (`none`), so it is re-enabled here only.
+        <rect
+          {...{ [FLOORPLAN_DIMENSION_HIT_ATTRIBUTE]: '' }}
+          cursor="text"
+          fill="transparent"
+          height={plateHeight}
+          pointerEvents="all"
+          width={plateWidth}
+          x={-plateWidth / 2}
+          y={plateY}
+        />
+      )}
     </>
   )
 }

package/src/components/editor-2d/renderers/{floorplan-draft-wall-measurement.tsx → floorplan-draft-measurement.tsx}

@@ -1,16 +1,16 @@
 'use client'
 
-import type { WallPlanPoint } from '@pascal-app/core'
+/** Length plate + angle arcs for a drafted segment, in plan space. */
+type PlanPoint = readonly [number, number]
 
-/** Length plate + angle arcs for a drafted wall segment, in plan space. */
-export type DraftWallMeasurement = {
+export type DraftMeasurement = {
   lengthLabel: string
-  midpoint: WallPlanPoint
-  direction: WallPlanPoint
+  midpoint: PlanPoint
+  direction: PlanPoint
   angleLabels: {
     id: string
     label: string
-    center: WallPlanPoint
+    center: PlanPoint
     radius: number
     startAngle: number
     endAngle: number
@@ -18,7 +18,7 @@ export type DraftWallMeasurement = {
   }[]
 }
 
-export function FloorplanDraftWallMeasurement({
+export function FloorplanDraftMeasurement({
   measurement,
   measurementStroke,
   labelBackground,
@@ -26,7 +26,7 @@ export function FloorplanDraftWallMeasurement({
   sceneRotationDeg,
   unitsPerPixel,
 }: {
-  measurement: DraftWallMeasurement
+  measurement: DraftMeasurement
   measurementStroke: string
   labelBackground: string
   labelText: string

package/src/components/editor-2d/renderers/floorplan-geometry-renderer.tsx

@@ -172,7 +172,10 @@ function documentTextFontSize(
 }
 
 function documentTextSizePt(geometry: Extract<FloorplanGeometry, { kind: 'text' }>): number {
-  switch (readFloorplanGeometryMetadata(geometry).annotationRole) {
+  const metadata = readFloorplanGeometryMetadata(geometry)
+  // an explicit paper size wins over the role's (a sheet's room tag sets its own)
+  if (typeof metadata.textSizePt === 'number' && metadata.textSizePt > 0) return metadata.textSizePt
+  switch (metadata.annotationRole) {
     case 'room-label':
       if (geometry.fontSize >= 0.18) return DOCUMENT_ROOM_NAME_TEXT_SIZE_PT
       if (geometry.fontSize >= 0.145) return DOCUMENT_ROOM_NUMBER_TEXT_SIZE_PT

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

@@ -15,6 +15,7 @@ import {
   FLOORPLAN_NODE_EXTENSION_KEY,
   floorplanGeometryMetadata,
 } from '../../../lib/floorplan/floorplan-extension'
+import type { SessionWrites } from '../../../lib/session-writes'
 import {
   buildFloorplanEntryGeometry,
   cancelFloorplanAffordanceDrag,
@@ -30,6 +31,7 @@ import {
   isFloorplanOpeningPlacementState,
   resolveFloorplanHandleUnitsPerPixel,
   siteToFloorplanTransform,
+  splitFloorplanHandles,
   splitFloorplanOverlay,
   subscribeFloorplanAffordanceToolCancel,
 } from './floorplan-registry-layer'
@@ -385,7 +387,13 @@ describe('floorplan affordance cancellation', () => {
       canCommit: () => true,
       commit,
     }
-    const snapshots = [{ id: 'wall_a' as AnyNodeId, data: { width: 1 } }]
+    const revert = mock(() => {})
+    const writes = {
+      record: (run: () => unknown) => run(),
+      revert,
+      changes: () => ({ create: [], update: [], delete: [] }),
+      size: 0,
+    } as unknown as SessionWrites
     const drag = {
       pointerId: 7,
       captureTarget: {
@@ -394,12 +402,11 @@ describe('floorplan affordance cancellation', () => {
       } as unknown as Element,
       handleId: 'wall_a:endpoint',
       session,
-      snapshots,
+      writes,
       historyPaused: true,
       lastPlanPoint: [0, 0] as [number, number],
     }
     const dragRef = { current: drag }
-    const restoreSnapshots = mock(() => {})
     const resumeHistory = mock(() => {})
     const clearPreview = mock(() => {})
     const clearSnapFeedback = mock(() => {})
@@ -410,7 +417,6 @@ describe('floorplan affordance cancellation', () => {
     const unsubscribe = subscribeFloorplanAffordanceToolCancel(
       () =>
         cancelFloorplanAffordanceDrag(dragRef, {
-          restoreSnapshots,
           resumeHistory,
           clearPreview,
           clearSnapFeedback,
@@ -429,7 +435,7 @@ describe('floorplan affordance cancellation', () => {
 
     expect(dragRef.current).toBeNull()
     expect(releasePointerCapture).toHaveBeenCalledWith(7)
-    expect(restoreSnapshots).toHaveBeenCalledWith(snapshots)
+    expect(revert).toHaveBeenCalledTimes(1)
     expect(resumeHistory).toHaveBeenCalledTimes(1)
     expect(clearPreview).toHaveBeenCalledTimes(2)
     expect(clearPreview).toHaveBeenNthCalledWith(1, 'wall_a')
@@ -450,7 +456,6 @@ describe('floorplan opening placement interaction routing', () => {
   test('passes entries through only while an opening tool or moving opening is active', () => {
     expect(
       isFloorplanOpeningPlacementState({
-        phase: 'structure',
         mode: 'build',
         tool: 'window',
         movingNodeHasWallOpeningPlacement: false,
@@ -458,7 +463,6 @@ describe('floorplan opening placement interaction routing', () => {
     ).toBe(true)
     expect(
       isFloorplanOpeningPlacementState({
-        phase: 'structure',
         mode: 'select',
         tool: null,
         movingNodeHasWallOpeningPlacement: true,
@@ -466,7 +470,6 @@ describe('floorplan opening placement interaction routing', () => {
     ).toBe(true)
     expect(
       isFloorplanOpeningPlacementState({
-        phase: 'structure',
         mode: 'select',
         tool: null,
         movingNodeHasWallOpeningPlacement: false,
@@ -829,3 +832,30 @@ describe('isFloorplanHierarchyVisible', () => {
     expect(visibleUnder(nodes, 'level_a', 'wall_a')).toBe(true)
   })
 })
+
+describe('the handles pass', () => {
+  test('grabbable handles leave the overlay for a pass of their own, under the same transform', () => {
+    const label = { kind: 'text', x: 0, y: 0, text: 'Wall 1' } as FloorplanGeometry
+    const corner = {
+      kind: 'endpoint-handle',
+      point: [1, 0],
+      state: 'idle',
+      affordance: 'move-endpoint',
+      payload: { wallId: 'wall_a', endpoint: 'end' },
+    } as FloorplanGeometry
+    const tree = {
+      kind: 'group',
+      transform: 'rotate(30)',
+      children: [label, { kind: 'group', children: [corner] }],
+    } as FloorplanGeometry
+    expect(splitFloorplanHandles(tree)).toEqual({
+      rest: { kind: 'group', transform: 'rotate(30)', children: [label] },
+      handles: {
+        kind: 'group',
+        transform: 'rotate(30)',
+        children: [{ kind: 'group', children: [corner] }],
+      },
+    } as never)
+    expect(splitFloorplanHandles(label)).toEqual({ rest: label, handles: null })
+  })
+})