@pascal-app/editor 1.0.6 → 1.1.0

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

@@ -1,11 +1,22 @@
 'use client'
 
-import { type FloorplanGeometry, type Point, roomDrawnFloor, useScene } from '@pascal-app/core'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type FloorplanGeometry,
+  formatLinearMeasurement,
+  nodeRegistry,
+  type Point,
+  roomDrawnFloor,
+  useScene,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Minus, Plus } from 'lucide-react'
 import { type PointerEvent as ReactPointerEvent, useMemo, useState } from 'react'
-import { useSelectedRoom } from '../../hooks/use-selected-room'
-import { formatLinearMeasurement, MEASUREMENT_FLOORPLAN_COLOR } from '../../lib/measurements'
+import { useShallow } from 'zustand/react/shallow'
+import { useRoomRecords, useSelectedRoom } from '../../hooks/use-selected-room'
+import { getFloorplanNodeExtension } from '../../lib/floorplan/floorplan-extension'
+import { MEASUREMENT_FLOORPLAN_COLOR } from '../../lib/measurements'
 import {
   commitRoomFloorElevation,
   roomRelativeFloorHeight,
@@ -21,8 +32,13 @@ import {
   useRoomHandleDrag,
   type WallPushHandle,
 } from '../../lib/room-handle-drag'
-import type { RoomDimension } from '../../lib/room-push-dimensions'
+import {
+  mergeSelectionDimensions,
+  type OwnedSelectionDimension,
+  type RoomDimension,
+} from '../../lib/room-push-dimensions'
 import useEditor from '../../store/use-editor'
+import useFloorplanAnnotationVisibility from '../../store/use-floorplan-annotation-visibility'
 import useInteractionScope from '../../store/use-interaction-scope'
 import { useFloorplanRender } from '../editor-2d/floorplan-render-context'
 import { FloorplanGeometryRenderer } from '../editor-2d/renderers/floorplan-geometry-renderer'
@@ -158,9 +174,10 @@ function startArrow(event: ReactPointerEvent<SVGPathElement>, run: () => unknown
 
 /**
  * The selected room's arrows on the plan: one push/pull chevron per boundary
- * span (on the far face, along the normal the handle supplies) and, for a
- * mezzanine, one per plate edge. Mounted after every node's handles so a
- * wall outline never takes the press. The drags are the 3D arrows' own.
+ * wall span (on the far face, along the normal the handle supplies), one per
+ * straight edge of invisible walls and, for a mezzanine, one per plate edge.
+ * Mounted after every node's handles so a wall outline never takes the press.
+ * The drags are the 3D arrows' own.
  */
 export function RoomHandles2D({ levelId }: { levelId: string | null }) {
   const room = useRoomControls()
@@ -327,6 +344,13 @@ export function RoomHandleDragPreview2D({ levelId }: { levelId: string | null })
   const unit = useViewer((s) => s.unit)
   const metricNotation = useViewer((s) => s.metricNotation)
   if (!drag || drag.levelId !== levelId || drag.kind === 'elevation') return null
+  if (drag.kind === 'wall-group-push')
+    return (
+      <g data-room-drag-preview-2d pointerEvents="none">
+        <PlanRoomDimensions dimensions={drag.dimensions} />
+        {drag.message && <PlanReadout at={drag.anchor} refused text={drag.message} />}
+      </g>
+    )
   const plan = drag as PlanDrag
   const at: Point = [
     plan.anchor[0] + plan.outward[0] * plan.distance,
@@ -352,3 +376,130 @@ export function RoomHandleDragPreview2D({ levelId }: { levelId: string | null })
     </g>
   )
 }
+
+function selectionDimensionsOf(node: AnyNode | undefined) {
+  return node
+    ? getFloorplanNodeExtension(nodeRegistry.get(node.type))?.selectionDimensions
+    : undefined
+}
+
+const NO_NODES: readonly AnyNode[] = []
+
+/**
+ * The selected nodes that show their temporary dimensions now: Select mode,
+ * nothing in progress, Display → Dimensions on, kinds with `selectionDimensions`
+ * only (a wall among other selected things still shows its own), on the first
+ * one's level. A new array only when one of them changes.
+ */
+export function useSelectionDimensionNodes(): readonly AnyNode[] {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const enabled = useEditor((s) => s.mode === 'select')
+  const idle = useInteractionScope((s) => s.scope.kind === 'idle')
+  const dragging = useRoomHandleDrag((s) => s.drag !== null)
+  const shown = useFloorplanAnnotationVisibility((s) => s.showDimensions)
+  const active = enabled && idle && !dragging && shown
+  return useScene(
+    useShallow((s) => {
+      if (!active) return NO_NODES
+      const found: AnyNode[] = []
+      for (const id of selectedIds) {
+        const node = s.nodes[id as AnyNodeId]
+        if (!node || !selectionDimensionsOf(node)) continue
+        if (found.length && node.parentId !== found[0]!.parentId) continue
+        found.push(node)
+      }
+      return found
+    }),
+  )
+}
+
+/**
+ * The selected nodes' temporary dimensions (`useSelectionDimensionNodes`),
+ * from each kind's `selectionDimensions` (a wall: the room widths its push
+ * shows and, for an exterior wall, the outside size, as Display → Measure
+ * walls asks). Several selected walls show each one's, a room two of them
+ * bound measured once. Shared by the plan and the 3D view; typing into one
+ * drives the node it runs from. Recomputed only when a measured node or its
+ * level's rooms change (the room index keeps its records while unrelated
+ * nodes edit).
+ */
+export function useSelectedWallDimensions(): {
+  levelId: string
+  dimensions: readonly OwnedSelectionDimension[]
+} | null {
+  const measured = useSelectionDimensionNodes()
+  const faces = useFloorplanAnnotationVisibility((s) => s.wallDimensionFaces)
+  const levelId = measured[0]?.parentId ?? null
+  const rooms = useRoomRecords(levelId)
+  return useMemo(() => {
+    // `rooms` is the invalidation key: it changes when the level's room
+    // topology, slabs, ceilings or zones do.
+    if (!levelId || !rooms) return null
+    const nodes = useScene.getState().nodes
+    const dimensions = mergeSelectionDimensions(
+      measured.map((node) => ({
+        ownerId: node.id,
+        dimensions: selectionDimensionsOf(node)?.({ node, nodes, faces }) ?? [],
+      })),
+    )
+    return dimensions.length ? { levelId, dimensions } : null
+  }, [faces, levelId, measured, rooms])
+}
+
+/**
+ * The selected walls' temporary dimensions on the plan, drawn as the push
+ * drag draws its room widths (indigo line, end dots). Each is a `dimension`
+ * owned by the wall it runs from, so a click on its value opens the plan's
+ * type-a-value box (`FloorplanDimensionEditOverlay`) and the typed size slides
+ * that wall.
+ */
+export function SelectedWallDimensions2D({ levelId }: { levelId: string | null }) {
+  const selection = useSelectedWallDimensions()
+  const context = useFloorplanRender()
+  const unit = useViewer((s) => s.unit)
+  const metricNotation = useViewer((s) => s.metricNotation)
+  const owners = useMemo(() => {
+    const byOwner = new Map<string, FloorplanGeometry[]>()
+    for (const { from, to, distance, ownerId } of selection?.dimensions ?? []) {
+      const length = Math.hypot(to[0] - from[0], to[1] - from[1]) || 1
+      const geometry: FloorplanGeometry = {
+        kind: 'dimension',
+        start: from,
+        end: to,
+        offsetNormal: [-(to[1] - from[1]) / length, (to[0] - from[0]) / length],
+        offsetDistance: 0,
+        extensionOvershoot: 0,
+        extensionStartGap: 0,
+        terminator: 'dot',
+        text: formatLinearMeasurement(distance, unit, metricNotation),
+        stroke: MEASUREMENT_FLOORPLAN_COLOR,
+      }
+      const list = byOwner.get(ownerId)
+      if (list) list.push(geometry)
+      else byOwner.set(ownerId, [geometry])
+    }
+    return [...byOwner].map(([ownerId, children]) => ({
+      ownerId,
+      geometry: { kind: 'group', children } satisfies FloorplanGeometry,
+    }))
+  }, [metricNotation, selection, unit])
+  if (!selection || selection.levelId !== levelId) return null
+  return (
+    <g
+      data-selected-wall-dimensions-2d=""
+      // A press on a value is the type-a-value box's, not the plan's marquee or pan.
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      {owners.map(({ ownerId, geometry }) => (
+        <g data-node-id={ownerId} key={ownerId}>
+          <FloorplanGeometryRenderer
+            geometry={geometry}
+            pointerEventsOverride="none"
+            sceneRotationDeg={context?.sceneRotationDeg ?? 0}
+            screenUnitsPerPixel={context?.unitsPerPixel}
+          />
+        </g>
+      ))}
+    </g>
+  )
+}

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

@@ -1,14 +1,17 @@
 'use client'
 
 import {
+  type AnyNodeId,
   clampRoomFloorHandle,
+  formatLinearMeasurement,
   type Point,
   roomDrawnFloor,
+  roomFloorElevation,
   sceneRegistry,
+  usePascalI18n,
   useScene,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
+import { MEASUREMENT_ACTIVE_COLOR, useViewer } from '@pascal-app/viewer'
 import { type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
@@ -33,7 +36,7 @@ import {
   publishStructuralElevationGuide,
   resolveStructuralElevationSnap,
 } from '../../lib/elevation-guides'
-import { formatLinearMeasurement, MEASUREMENT_ACTIVE_COLOR } from '../../lib/measurements'
+import { parseDimensionInput } from '../../lib/floorplan/dimension-drive'
 import { commitRoomFloorElevation, roomFloorBase } from '../../lib/room-construction-commands'
 import {
   type MezzanineEdgeHandle,
@@ -42,7 +45,6 @@ import {
   ownFloorElevationBounds,
   ROOM_ELEVATION_DRAG_LABEL,
   type RoomHandleDrag,
-  roomFloorElevation,
   roomPushHandles,
   runMezzanineEdgeDrag,
   runRoomHandleDrag,
@@ -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}
     </>
   )