@pascal-app/editor 1.0.6 → 1.0.7

package/src/components/editor/room-handles.tsx

@@ -1,14 +1,15 @@
 'use client'
 
 import {
+  type AnyNodeId,
   clampRoomFloorHandle,
   type Point,
   roomDrawnFloor,
   sceneRegistry,
+  usePascalI18n,
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
 import { type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
@@ -33,6 +34,7 @@ import {
   publishStructuralElevationGuide,
   resolveStructuralElevationSnap,
 } from '../../lib/elevation-guides'
+import { parseDimensionInput } from '../../lib/floorplan/dimension-drive'
 import { formatLinearMeasurement, MEASUREMENT_ACTIVE_COLOR } from '../../lib/measurements'
 import { commitRoomFloorElevation, roomFloorBase } from '../../lib/room-construction-commands'
 import {
@@ -51,10 +53,16 @@ import {
 import type { RoomDimension } from '../../lib/room-push-dimensions'
 import type { RoomSelectionRecord } from '../../lib/room-selection'
 import useEditor, { isGridSnapActive, isMagneticSnapActive } from '../../store/use-editor'
+import {
+  commitDimensionValue,
+  useDimensionEditAllowed,
+} from '../editor-2d/renderers/floorplan-dimension-edit-overlay'
 import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
 import { ARROW_COLOR, ARROW_SCALE, HandleArrow } from './handles/handle-arrow'
 import { resolveResizeSnapValue } from './handles/resize-snap'
+import { Html } from './localized-html'
 import { formatMeasurement } from './measurement-pill'
+import { useSelectedWallDimensions } from './room-handles-2d'
 import { WallPushArrow } from './wall-push-arrow'
 
 const PILL =
@@ -295,8 +303,9 @@ export function ElevationArrows({
 
 /**
  * A selected room's 3D handles: the floor elevation tracker at its centroid
- * and one push/pull arrow outside every boundary wall. Rendered in the level
- * frame by `RoomControls3D`, only while nothing else is in progress.
+ * and one push/pull arrow outside every boundary wall and every straight edge
+ * of invisible walls. Rendered in the level frame by `RoomControls3D`, only
+ * while nothing else is in progress.
  */
 export function RoomHandles3D({ room }: { room: RoomSelectionRecord }) {
   const nodes = useScene((s) => s.nodes)
@@ -307,7 +316,11 @@ export function RoomHandles3D({ room }: { room: RoomSelectionRecord }) {
     () => outlineCentroid([room.polygon as Point[], ...(room.holes as Point[][])]),
     [room.polygon, room.holes],
   )
-  const handles = useMemo(() => roomPushHandles(nodes, room.spans), [nodes, room.spans])
+  // Its invisible walls' arrows lie on its floor, where their dashed lines are drawn.
+  const handles = useMemo(
+    () => roomPushHandles(nodes, room.spans, elevation),
+    [nodes, room.spans, elevation],
+  )
   // A mezzanine has no walls: its plate edges carry the push arrows instead.
   const edges = useMemo(
     () => (room.mezzanine ? mezzanineEdgeHandles(nodes, room.zoneId) : []),
@@ -414,9 +427,20 @@ const DIMENSION_LABEL_OUTLINE = [
  * above its room's floor and drawn over the walls, closed by cross ticks, with
  * the measurement's outlined label — apart from the moved-distance pill.
  */
-function RoomDimensionLines3D({ dimensions }: { dimensions: RoomDimension[] }) {
+function RoomDimensionLines3D({
+  dimensions,
+  hidden = false,
+}: {
+  /** With an `ownerId` (a selected wall's), a value can be typed to move that wall. */
+  dimensions: readonly (RoomDimension & { ownerId?: string })[]
+  /** Hides the labels while keeping their drei `Html` roots mounted. */
+  hidden?: boolean
+}) {
+  const i18n = usePascalI18n()
   const unit = useViewer((s) => s.unit)
   const metricNotation = useViewer((s) => s.metricNotation)
+  const editAllowed = useDimensionEditAllowed()
+  const [editing, setEditing] = useState<string | null>(null)
   const geometry = useMemo(() => {
     if (!dimensions.length) return null
     const positions: number[] = []
@@ -441,27 +465,175 @@ function RoomDimensionLines3D({ dimensions }: { dimensions: RoomDimension[] }) {
         raycast={noRaycast}
         renderOrder={1001}
       />
-      {dimensions.map((dimension) => (
-        <Html
-          center
-          key={dimension.key}
-          position={[
-            (dimension.from[0] + dimension.to[0]) / 2,
-            dimension.elevation,
-            (dimension.from[1] + dimension.to[1]) / 2,
-          ]}
-          style={{ pointerEvents: 'none' }}
-          zIndexRange={[20, 0]}
-        >
-          <div
-            className="-translate-y-3 whitespace-nowrap font-medium text-base text-white"
-            data-room-dimension-3d
-            style={{ textShadow: DIMENSION_LABEL_OUTLINE }}
+      {dimensions.map(({ ownerId: wallId, ...dimension }) => {
+        const editable = editAllowed && !!wallId
+        return (
+          <Html
+            center
+            key={dimension.key}
+            position={[
+              (dimension.from[0] + dimension.to[0]) / 2,
+              dimension.elevation,
+              (dimension.from[1] + dimension.to[1]) / 2,
+            ]}
+            style={{ display: hidden ? 'none' : undefined, pointerEvents: 'none' }}
+            zIndexRange={[20, 0]}
           >
-            {formatMeasurement(dimension.distance, unit, metricNotation)}
-          </div>
-        </Html>
-      ))}
+            {editable && wallId && !hidden && editing === dimension.key ? (
+              <DimensionValueInput
+                dimension={dimension}
+                initial={formatMeasurement(dimension.distance, unit, metricNotation)}
+                onClose={() => setEditing(null)}
+                unit={unit}
+                wallId={wallId}
+              />
+            ) : (
+              <div
+                className={`-translate-y-3 whitespace-nowrap font-medium text-base text-white ${editable ? 'pointer-events-auto cursor-text' : ''}`}
+                data-room-dimension-3d
+                onClick={editable ? () => setEditing(dimension.key) : undefined}
+                onKeyDown={
+                  editable
+                    ? (event) => {
+                        if (event.key === 'Enter') setEditing(dimension.key)
+                      }
+                    : undefined
+                }
+                onPointerDown={editable ? (event) => event.stopPropagation() : undefined}
+                role={editable ? 'button' : undefined}
+                style={{ textShadow: DIMENSION_LABEL_OUTLINE }}
+                tabIndex={editable ? 0 : undefined}
+                title={
+                  editable
+                    ? i18n._({
+                        id: 'editor.roomHandles.typeASizeToMoveThe',
+                        message: 'Type a size to move the wall',
+                      })
+                    : undefined
+                }
+              >
+                {formatMeasurement(dimension.distance, unit, metricNotation)}
+              </div>
+            )}
+          </Html>
+        )
+      })}
+    </group>
+  )
+}
+
+/**
+ * A temporary dimension's value, typed: Enter moves the selected wall so the
+ * dimension reads it (`commitDimensionValue`, one undo step), Esc or a click
+ * away leaves it. Feet-inches, metric and bare numbers parse as in the plan.
+ */
+function DimensionValueInput({
+  dimension,
+  initial,
+  onClose,
+  unit,
+  wallId,
+}: {
+  dimension: RoomDimension
+  initial: string
+  onClose: () => void
+  unit: 'metric' | 'imperial'
+  wallId: string
+}) {
+  const i18n = usePascalI18n()
+  const [draft, setDraft] = useState(initial)
+  const [error, setError] = useState<string | null>(null)
+  const commit = () => {
+    const nextLength = parseDimensionInput(draft, unit)
+    if (nextLength === null) {
+      setError(
+        i18n._({
+          id: 'editor.roomHandles.cannotReadInput',
+          message: 'Cannot read "{input}"',
+          values: { input: draft.trim() },
+        }),
+      )
+      return
+    }
+    const outcome = commitDimensionValue({
+      target: {
+        ownerNodeId: wallId as AnyNodeId,
+        witnessStart: dimension.from,
+        witnessEnd: dimension.to,
+        value: dimension.distance,
+      },
+      nextLength,
+      unit,
+    })
+    if (outcome.ok) onClose()
+    else setError(outcome.reason)
+  }
+  return (
+    <div
+      className="pointer-events-auto -translate-y-3 w-24"
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      <input
+        // biome-ignore lint/a11y/noAutofocus: the box opens on a click to be typed in
+        autoFocus
+        aria-label={i18n._({ id: 'editor.roomHandles.dimensionValue', message: 'Dimension value' })}
+        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={onClose}
+        onChange={(event) => {
+          setDraft(event.target.value)
+          setError(null)
+        }}
+        onFocus={(event) => event.target.select()}
+        onKeyDown={(event) => {
+          event.stopPropagation()
+          if (event.key === 'Enter') {
+            event.preventDefault()
+            commit()
+          } else if (event.key === 'Escape') {
+            event.preventDefault()
+            onClose()
+          }
+        }}
+        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>
+  )
+}
+
+/**
+ * The selected walls' temporary dimensions in 3D, the plan's twin
+ * (`SelectedWallDimensions2D`): the room widths their pushes show and the
+ * outside sizes, drawn as the push draws them, in the walls' level frame.
+ */
+export function SelectedWallDimensions3D() {
+  const selection = useSelectedWallDimensions()
+  const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered)
+  const levelId = selection?.levelId ?? null
+  const root = useRef<Group>(null)
+  useFrame(() => {
+    const level = levelId ? sceneRegistry.nodes.get(levelId) : null
+    if (!root.current) return
+    root.current.visible = !!level && !isFloorplanHovered
+    if (level) {
+      level.updateWorldMatrix(true, false)
+      root.current.matrix.copy(level.matrixWorld)
+    }
+  })
+  // The labels are DOM (drei `Html`); with no document (a headless
+  // renderer) there is nothing to draw them into.
+  if (!selection || typeof document === 'undefined') return null
+  // Hovering the plan hides the dimensions rather than unmounting them: drei
+  // `Html` unmounts its DOM root synchronously, which React reports as an error
+  // when it happens inside a render.
+  return (
+    <group matrixAutoUpdate={false} ref={root}>
+      <RoomDimensionLines3D dimensions={selection.dimensions} hidden={isFloorplanHovered} />
     </group>
   )
 }
@@ -524,6 +696,7 @@ function MezzanineEdgeArrow({
 }
 
 export function RoomHandleDragPreview3D() {
+  const i18n = usePascalI18n()
   const drag = useRoomHandleDrag((s) => s.drag)
   const unit = useViewer((s) => s.unit)
   const metricNotation = useViewer((s) => s.metricNotation)
@@ -614,7 +787,9 @@ export function RoomHandleDragPreview3D() {
         />
         <Html center position={[ax, drag.value + 0.35, az]} zIndexRange={[25, 0]}>
           <div className={PILL}>
-            <span className="font-medium text-foreground">Floor</span>
+            <span className="font-medium text-foreground">
+              {i18n._({ id: 'editor.roomHandles.floor', message: 'Floor' })}
+            </span>
             <span className="text-muted-foreground">
               {formatMeasurement(
                 drag.value - roomFloorBase(useScene.getState().nodes, drag.zoneId),
@@ -627,6 +802,45 @@ export function RoomHandleDragPreview3D() {
       </group>
     )
   }
+  const ghosts = drag.ghosts.map((ghost, index) => {
+    const length = Math.hypot(ghost.end[0] - ghost.start[0], ghost.end[1] - ghost.start[1])
+    if (length < 1e-3) return null
+    return (
+      <mesh
+        key={index}
+        layers={EDITOR_LAYER}
+        material={materials.fill}
+        position={[
+          (ghost.start[0] + ghost.end[0]) / 2,
+          drag.base + ghost.height / 2,
+          (ghost.start[1] + ghost.end[1]) / 2,
+        ]}
+        raycast={noRaycast}
+        renderOrder={99}
+        rotation={[0, -Math.atan2(ghost.end[1] - ghost.start[1], ghost.end[0] - ghost.start[0]), 0]}
+      >
+        <boxGeometry args={[length, ghost.height, ghost.thickness]} />
+      </mesh>
+    )
+  })
+  if (drag.kind === 'wall-group-push')
+    return (
+      <group>
+        <RoomDimensionLines3D dimensions={drag.dimensions} />
+        {ghosts}
+        {drag.message && (
+          <Html
+            center
+            position={[drag.anchor[0], drag.height + 0.45, drag.anchor[1]]}
+            zIndexRange={[25, 0]}
+          >
+            <div className={PILL}>
+              <span className="font-medium text-red-500">{drag.message}</span>
+            </div>
+          </Html>
+        )}
+      </group>
+    )
   const at: Point = [
     drag.anchor[0] + drag.outward[0] * drag.distance,
     drag.anchor[1] + drag.outward[1] * drag.distance,
@@ -636,31 +850,7 @@ export function RoomHandleDragPreview3D() {
   return (
     <group>
       <RoomDimensionLines3D dimensions={drag.dimensions} />
-      {drag.ghosts.map((ghost, index) => {
-        const length = Math.hypot(ghost.end[0] - ghost.start[0], ghost.end[1] - ghost.start[1])
-        if (length < 1e-3) return null
-        return (
-          <mesh
-            key={index}
-            layers={EDITOR_LAYER}
-            material={materials.fill}
-            position={[
-              (ghost.start[0] + ghost.end[0]) / 2,
-              drag.base + ghost.height / 2,
-              (ghost.start[1] + ghost.end[1]) / 2,
-            ]}
-            raycast={noRaycast}
-            renderOrder={99}
-            rotation={[
-              0,
-              -Math.atan2(ghost.end[1] - ghost.start[1], ghost.end[0] - ghost.start[0]),
-              0,
-            ]}
-          >
-            <boxGeometry args={[length, ghost.height, ghost.thickness]} />
-          </mesh>
-        )
-      })}
+      {ghosts}
       <Html center position={[at[0], drag.height + 0.45, at[1]]} zIndexRange={[25, 0]}>
         <div className={PILL}>
           {drag.message ? (

package/src/components/editor/room-highlight.tsx

@@ -25,6 +25,7 @@ import { describeZoneOutline, type RoomSelectionRecord } from '../../lib/room-se
 import useEditor from '../../store/use-editor'
 import useInteractionScope from '../../store/use-interaction-scope'
 import { RoomControls2D, RoomControls3D } from './room-controls'
+import { SelectedWallDimensions3D } from './room-handles'
 
 /**
  * A zone reached as a zone (hovered or selected through its area or pill, not
@@ -188,6 +189,7 @@ export function RoomHighlight3D() {
   return (
     <>
       <RoomControls3D />
+      <SelectedWallDimensions3D />
       {room ? <RoomMesh room={room} /> : null}
     </>
   )

package/src/components/editor/room-labels.tsx

@@ -7,15 +7,18 @@ import {
   containsPoint,
   DEFAULT_LEVEL_HEIGHT,
   emitter,
+  formatNumber,
+  type PascalI18n,
   type Polygon,
   polygonInteriorPoint,
   type Ring,
   sceneRegistry,
+  useLocale,
+  usePascalI18n,
   useScene,
   type ZoneNode,
 } from '@pascal-app/core'
 import { timeSpan, useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
 import { useFrame, useThree } from '@react-three/fiber'
 import {
   createContext,
@@ -47,17 +50,14 @@ import { useShallow } from 'zustand/react/shallow'
 import { useRoomRecords } from '../../hooks/use-selected-room'
 import { getAreaUnitLabel, type LinearUnit, squareMetersToAreaUnit } from '../../lib/measurements'
 import { roomFloorElevation } from '../../lib/room-handle-drag'
+import { displayRoomName } from '../../lib/room-name-messages'
 import type { RoomSelectionRecord } from '../../lib/room-selection'
-import {
-  clickZoneArea,
-  hoverZoneArea,
-  leaveZoneArea,
-  zoneKindLabel,
-} from '../../lib/room-zone-routing'
+import { clickZoneArea, hoverZoneArea, leaveZoneArea } from '../../lib/room-zone-routing'
 import { selectionModifiersFromEvent } from '../../lib/selection-routing'
 import useEditor from '../../store/use-editor'
 import useInteractionScope from '../../store/use-interaction-scope'
 import { isViewVisible, VIEW_2D, VIEW_3D } from '../../store/view-layout'
+import { Html } from './localized-html'
 
 const CONTEXT_TYPES = new Set(['site', 'building', 'level'])
 
@@ -92,8 +92,12 @@ export function roomLabelsVisible(state: RoomLabelVisibilityState): boolean {
   )
 }
 
-export function formatRoomArea(squareMeters: number, unit: LinearUnit): string {
-  return `${squareMetersToAreaUnit(squareMeters, unit).toFixed(1)} ${getAreaUnitLabel(unit)}`
+export function formatRoomArea(squareMeters: number, unit: LinearUnit, locale?: string): string {
+  return `${formatNumber(squareMetersToAreaUnit(squareMeters, unit), {
+    min: 1,
+    max: 1,
+    locale,
+  })} ${getAreaUnitLabel(unit)}`
 }
 
 function useRoomLabelsVisible() {
@@ -1169,11 +1173,12 @@ export function RoomPillChip({
   onLeave: () => void
 }) {
   const unit = useViewer((s) => s.unit)
-  const areaLabel = formatRoomArea(areaM2, unit)
+  const locale = useLocale()
+  const areaLabel = formatRoomArea(areaM2, unit, locale)
   // biome-ignore lint/correctness/useExhaustiveDependencies: A dot's border box does not resize when its hidden text changes.
   useLayoutEffect(() => {
     if (elements instanceof PillElements) elements.measure(zoneId)
-  }, [areaM2, elements, name, unit, zoneId])
+  }, [areaM2, elements, locale, name, unit, zoneId])
   const register = useCallback(
     (element: HTMLElement | null) => {
       if (element) elements.set(zoneId, element)
@@ -1227,6 +1232,7 @@ export function RoomPillDetail({
   areaM2: number
 }) {
   const unit = useViewer((s) => s.unit)
+  const locale = useLocale()
   return (
     <div
       aria-hidden
@@ -1234,7 +1240,7 @@ export function RoomPillDetail({
       data-room-label-detail={zoneId}
       data-room-label-view={view}
     >
-      <LabelParts areaLabel={formatRoomArea(areaM2, unit)} color={color} full name={name} />
+      <LabelParts areaLabel={formatRoomArea(areaM2, unit, locale)} color={color} full name={name} />
     </div>
   )
 }
@@ -1244,7 +1250,13 @@ function useLabelZone(zoneId: string) {
   return zone && zone.visible !== false ? zone : null
 }
 
-const labelName = (zone: ZoneNode) => zone.name?.trim() || zoneKindLabel(zone)
+const labelName = (zone: ZoneNode, i18n: PascalI18n) => {
+  const name = zone.name?.trim()
+  if (name) return displayRoomName(name, i18n)
+  return zone.spaceRole === 'room'
+    ? i18n._({ id: 'editor.roomLabel.room', message: 'Room' })
+    : i18n._({ id: 'editor.roomLabel.zone', message: 'Zone' })
+}
 
 /**
  * One room's pill in the editor. Hover and click take the same rule as the
@@ -1260,6 +1272,7 @@ function RoomPill({
   view: '2d' | '3d'
   elements: Map<string, HTMLElement>
 }) {
+  const i18n = usePascalI18n()
   const zone = useLabelZone(entry.zoneId)
   // A pill that disappears under the cursor (its click selected something)
   // fires no leave: end the hover it set.
@@ -1270,7 +1283,7 @@ function RoomPill({
       areaM2={entry.area}
       color={zone.color}
       elements={elements}
-      name={labelName(zone)}
+      name={labelName(zone, i18n)}
       onClick={(event) => clickZoneArea(entry.zoneId, selectionModifiersFromEvent(event))}
       onHover={(event) => hoverZoneArea(entry.zoneId, selectionModifiersFromEvent(event))}
       onLeave={() => leaveZoneArea(entry.zoneId)}
@@ -1281,13 +1294,14 @@ function RoomPill({
 }
 
 function RoomDetail({ entry, view }: { entry: LabelEntry; view: '2d' | '3d' }) {
+  const i18n = usePascalI18n()
   const zone = useLabelZone(entry.zoneId)
   if (!zone) return null
   return (
     <RoomPillDetail
       areaM2={entry.area}
       color={zone.color}
-      name={labelName(zone)}
+      name={labelName(zone, i18n)}
       view={view}
       zoneId={entry.zoneId}
     />