@pascal-app/editor 1.0.1 → 1.0.4

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

@@ -0,0 +1,156 @@
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
+import type { AnyNode, AnyNodeId } from '@pascal-app/core'
+import { useScene } from '@pascal-app/core'
+import { commitDimensionValue, isDimensionEditAllowed } from './floorplan-dimension-edit-overlay'
+
+type Change = { id: AnyNodeId; data: Partial<AnyNode> }
+
+function wall(id: string, start: [number, number], end: [number, number]): AnyNode {
+  return {
+    object: 'node',
+    id,
+    type: 'wall',
+    parentId: 'level_1',
+    visible: true,
+    metadata: {},
+    start,
+    end,
+    thickness: 0.15,
+    children: [],
+  } as unknown as AnyNode
+}
+
+function nodes(): Record<string, AnyNode> {
+  return {
+    level_1: {
+      object: 'node',
+      id: 'level_1',
+      type: 'level',
+      parentId: null,
+      visible: true,
+      metadata: {},
+      level: 0,
+      children: ['wall_a', 'wall_b', 'dim_1'],
+    } as unknown as AnyNode,
+    wall_a: wall('wall_a', [0, 0], [3, 0]),
+    wall_b: wall('wall_b', [3, 0], [3, 4]),
+    dim_1: {
+      object: 'node',
+      id: 'dim_1',
+      type: 'construction-dimension',
+      parentId: 'level_1',
+      visible: true,
+      metadata: {},
+      children: [],
+    } as unknown as AnyNode,
+  }
+}
+
+let initial: ReturnType<typeof useScene.getState>
+let applied: Change[]
+let updated: Change[]
+let dirty: AnyNodeId[]
+
+beforeEach(() => {
+  initial = useScene.getState()
+  applied = []
+  updated = []
+  dirty = []
+  useScene.setState({
+    nodes: nodes() as ReturnType<typeof useScene.getState>['nodes'],
+    applyNodeChanges: ((changes: { update?: Change[] }) => {
+      applied.push(...(changes.update ?? []))
+    }) as ReturnType<typeof useScene.getState>['applyNodeChanges'],
+    updateNode: ((id: AnyNodeId, data: Partial<AnyNode>) => {
+      updated.push({ id, data })
+    }) as ReturnType<typeof useScene.getState>['updateNode'],
+    markDirty: ((id: AnyNodeId) => {
+      dirty.push(id)
+    }) as ReturnType<typeof useScene.getState>['markDirty'],
+  })
+})
+
+afterEach(() => {
+  useScene.setState(initial, true)
+})
+
+describe('commitDimensionValue', () => {
+  test('a wall dimension drives the wall end and the wall sharing that corner', () => {
+    const outcome = commitDimensionValue({
+      target: {
+        ownerNodeId: 'wall_a' as AnyNodeId,
+        witnessStart: [0, 0],
+        witnessEnd: [3, 0],
+        value: 3,
+      },
+      nextLength: 3.5,
+    })
+
+    expect(outcome).toEqual({ ok: true })
+    const byId = new Map(applied.map((change) => [change.id, change.data]))
+    expect(byId.get('wall_a' as AnyNodeId)).toEqual({ start: [0, 0], end: [3.5, 0] })
+    expect(byId.get('wall_b' as AnyNodeId)).toEqual({ start: [3.5, 0], end: [3, 4] })
+    expect(dirty.sort()).toEqual(['wall_a', 'wall_b'] as AnyNodeId[])
+    expect(updated).toEqual([])
+  })
+
+  test('an undrivable wall dimension is refused and nothing is written', () => {
+    const outcome = commitDimensionValue({
+      target: {
+        ownerNodeId: 'wall_a' as AnyNodeId,
+        witnessStart: [1.5, -1],
+        witnessEnd: [1.5, 1],
+        value: 2,
+      },
+      nextLength: 2.5,
+    })
+
+    expect(outcome.ok).toBe(false)
+    expect(applied).toEqual([])
+    expect(updated).toEqual([])
+  })
+
+  test('an undrivable construction dimension keeps the typed text as an override', () => {
+    const outcome = commitDimensionValue({
+      target: {
+        ownerNodeId: 'dim_1' as AnyNodeId,
+        witnessStart: [10, 10],
+        witnessEnd: [12, 10],
+        value: 2,
+      },
+      nextLength: 3,
+      unit: 'metric',
+    })
+
+    expect(outcome).toEqual({ ok: true })
+    expect(applied).toEqual([])
+    expect(updated).toHaveLength(1)
+    expect(updated[0]?.id).toBe('dim_1' as AnyNodeId)
+    expect(typeof (updated[0]?.data as { textOverride?: unknown }).textOverride).toBe('string')
+  })
+})
+
+describe('isDimensionEditAllowed', () => {
+  const idle = {
+    workspaceMode: 'edit',
+    mode: 'select',
+    isPreviewMode: false,
+    isCaptureMode: false,
+    isFirstPersonMode: false,
+  } as const
+
+  test('only an editable scene in select mode of the edit workspace', () => {
+    expect(isDimensionEditAllowed(idle, { readOnly: false })).toBe(true)
+    expect(isDimensionEditAllowed(idle, { readOnly: true })).toBe(false)
+    expect(isDimensionEditAllowed({ ...idle, workspaceMode: 'studio' }, { readOnly: false })).toBe(
+      false,
+    )
+    expect(isDimensionEditAllowed({ ...idle, workspaceMode: 'sheets' }, { readOnly: false })).toBe(
+      false,
+    )
+    expect(isDimensionEditAllowed({ ...idle, mode: 'delete' }, { readOnly: false })).toBe(false)
+    expect(isDimensionEditAllowed({ ...idle, isPreviewMode: true }, { readOnly: false })).toBe(
+      false,
+    )
+  })
+})

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}
+        />
+      )}
     </>
   )
 }