fix: respect imperial units in wall panel

Author: MateoSaettone

packages/editor/src/components/editor/floorplan-panel.tsx

@@ -74,6 +74,7 @@ import {
   type FloorplanNodeTransform as SharedFloorplanNodeTransform,
 } from '../../lib/floorplan'
 import { guideEmitter } from '../../lib/guide-events'
+import { formatLinearMeasurement, linearUnitToMeters } from '../../lib/measurements'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import { SITE_BOUNDARY_DRAG_LABEL } from '../../lib/site-boundary'
 import { cn } from '../../lib/utils'
@@ -2614,14 +2615,7 @@ function formatMeasurement(
   metersPerUnit: number | null = null,
 ) {
   const measuredValue = metersPerUnit && metersPerUnit > 0 ? value * metersPerUnit : value
-  if (unit === 'imperial') {
-    const feet = measuredValue * 3.280_84
-    const wholeFeet = Math.floor(feet)
-    const inches = Math.round((feet - wholeFeet) * 12)
-    if (inches === 12) return `${wholeFeet + 1}'0"`
-    return `${wholeFeet}'${inches}"`
-  }
-  return `${Number.parseFloat(measuredValue.toFixed(2))}m`
+  return formatLinearMeasurement(measuredValue, unit)
 }
 
 function formatNumber(value: number, fractionDigits = 2) {
@@ -2633,7 +2627,7 @@ function convertReferenceLengthToMeters(value: number, unit: ReferenceScaleUnit)
     case 'centimeters':
       return value / 100
     case 'feet':
-      return value * 0.3048
+      return linearUnitToMeters(value, 'imperial')
     case 'inches':
       return value * 0.0254
     default:

packages/editor/src/components/editor/site-edge-labels.tsx

@@ -7,9 +7,9 @@ import { Html } from '@react-three/drei'
 import { createPortal, useFrame, useThree } from '@react-three/fiber'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { type Camera, type Object3D, Vector3 } from 'three'
+import { formatLinearMeasurement } from '../../lib/measurements'
 import { SITE_BOUNDARY_DRAG_LABEL } from '../../lib/site-boundary'
 import useEditor from '../../store/use-editor'
-import { formatMeasurement } from './measurement-pill'
 
 type ViewportSize = {
   width: number
@@ -110,7 +110,7 @@ export function SiteEdgeLabels() {
               textShadow: `-1.5px -1.5px 0 ${shadowColor}, 1.5px -1.5px 0 ${shadowColor}, -1.5px 1.5px 0 ${shadowColor}, 1.5px 1.5px 0 ${shadowColor}, 0 0 4px ${shadowColor}, 0 0 4px ${shadowColor}`,
             }}
           >
-            {formatMeasurement(edge.dist, unit)}
+            {formatLinearMeasurement(edge.dist, unit)}
           </div>
         </Html>
       ))}

packages/editor/src/components/editor/wall-measurement-label.tsx

@@ -23,6 +23,7 @@ import { Html } from '@react-three/drei'
 import { createPortal, useFrame } from '@react-three/fiber'
 import { useMemo, useState } from 'react'
 import * as THREE from 'three'
+import { formatLinearMeasurement } from '../../lib/measurements'
 
 const GUIDE_Y_OFFSET = 0.08
 const LABEL_LIFT = 0.08
@@ -62,17 +63,6 @@ type WallFaceLine = {
   end: Point2D
 }
 
-function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
-  if (unit === 'imperial') {
-    const feet = value * 3.280_84
-    const wholeFeet = Math.floor(feet)
-    const inches = Math.round((feet - wholeFeet) * 12)
-    if (inches === 12) return `${wholeFeet + 1}'0"`
-    return `${wholeFeet}'${inches}"`
-  }
-  return `${Number.parseFloat(value.toFixed(2))}m`
-}
-
 export function WallMeasurementLabel() {
   const selectedIds = useViewer((state) => state.selection.selectedIds)
   const nodes = useScene((state) => state.nodes)
@@ -547,8 +537,8 @@ function WallMeasurementAnnotation({ wall }: { wall: WallNode }) {
     }
     return total
   }, [guide, wall])
-  const label = formatMeasurement(length, unit)
-  const heightLabel = `H ${formatMeasurement(wall.height ?? DEFAULT_WALL_HEIGHT, unit)}`
+  const label = formatLinearMeasurement(length, unit)
+  const heightLabel = `H ${formatLinearMeasurement(wall.height ?? DEFAULT_WALL_HEIGHT, unit)}`
 
   if (!(guide && Number.isFinite(length) && length >= 0.01)) return null
 

packages/editor/src/components/tools/item/use-placement-coordinator.tsx

@@ -40,6 +40,7 @@ import {
 import { distance, smoothstep, uv, vec2 } from 'three/tsl'
 import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
+import { formatLinearMeasurement } from '../../../lib/measurements'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { resolveAlignmentForActiveBuilding } from '../../../lib/world-grid-snap'
 import useEditor from '../../../store/use-editor'
@@ -68,17 +69,6 @@ const DEFAULT_DIMENSIONS: [number, number, number] = [1, 1, 1]
  *  floor-plan overlay and the 3D registry move tool. */
 const ALIGNMENT_THRESHOLD_M = 0.08
 
-function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
-  if (unit === 'imperial') {
-    const feet = value * 3.280_84
-    const wholeFeet = Math.floor(feet)
-    const inches = Math.round((feet - wholeFeet) * 12)
-    if (inches === 12) return `${wholeFeet + 1}'0"`
-    return `${wholeFeet}'${inches}"`
-  }
-  return `${Number.parseFloat(value.toFixed(2))}m`
-}
-
 /**
  * Expand `bounds` outward so each axis is rounded up to the active grid step.
  * The wireframe stays centered on the original bounds centre on each axis we
@@ -1869,9 +1859,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
   const initialDepthGuideGeometry = useMemo(() => createLineGeometry(), [])
   const initialHeightGuideGeometry = useMemo(() => createLineGeometry(), [])
   const currentDimensionBounds = dimensionBounds ?? initialDimensionBounds
-  const widthLabel = formatMeasurement(currentDimensionBounds.dimensions[0], unit)
-  const depthLabel = formatMeasurement(currentDimensionBounds.dimensions[2], unit)
-  const heightLabel = formatMeasurement(currentDimensionBounds.dimensions[1], unit)
+  const widthLabel = formatLinearMeasurement(currentDimensionBounds.dimensions[0], unit)
+  const depthLabel = formatLinearMeasurement(currentDimensionBounds.dimensions[2], unit)
+  const heightLabel = formatLinearMeasurement(currentDimensionBounds.dimensions[1], unit)
   const widthLabelPosition: [number, number, number] = [
     currentDimensionBounds.center[0],
     0.04,

packages/editor/src/components/ui/controls/metric-control.tsx

@@ -3,6 +3,11 @@
 import { useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  getLinearUnitLabel,
+  linearUnitToMeters,
+  metersToLinearUnit,
+} from '../../../lib/measurements'
 import { cn } from '../../../lib/utils'
 
 interface MetricControlProps {
@@ -34,10 +39,30 @@ export function MetricControl({
 }: MetricControlProps) {
   const viewerUnit = useViewer((state) => state.unit)
   const isImperial = viewerUnit === 'imperial' && unit === 'm'
-  const multiplier = isImperial ? 3.280_84 : 1
-  const displayUnit = isImperial ? 'ft' : unit
+  const displayUnit = isImperial ? getLinearUnitLabel('imperial') : unit
 
-  const displayValue = value * multiplier
+  const toDisplayValue = useCallback(
+    (storedValue: number) => (isImperial ? metersToLinearUnit(storedValue, 'imperial') : storedValue),
+    [isImperial],
+  )
+  const toStoredValue = useCallback(
+    (displayValue: number) =>
+      isImperial ? linearUnitToMeters(displayValue, 'imperial') : displayValue,
+    [isImperial],
+  )
+  const clamp = useCallback(
+    (val: number) => {
+      return Math.min(Math.max(val, min), max)
+    },
+    [min, max],
+  )
+  const roundStoredValueForDisplayPrecision = useCallback(
+    (storedValue: number) =>
+      clamp(toStoredValue(Number.parseFloat(toDisplayValue(storedValue).toFixed(precision)))),
+    [clamp, precision, toDisplayValue, toStoredValue],
+  )
+
+  const displayValue = toDisplayValue(value)
 
   const [isEditing, setIsEditing] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
@@ -50,13 +75,6 @@ export function MetricControl({
   const valueRef = useRef(value)
   valueRef.current = value
 
-  const clamp = useCallback(
-    (val: number) => {
-      return Math.min(Math.max(val, min), max)
-    },
-    [min, max],
-  )
-
   const applyCommittedValue = useCallback(
     (nextValue: number) => {
       if (onCommit) {
@@ -84,12 +102,12 @@ export function MetricControl({
       e.preventDefault()
 
       const direction = e.deltaY < 0 ? 1 : -1
-      let scrollStep = step / multiplier
-      if (e.shiftKey) scrollStep = (step * 10) / multiplier
-      else if (e.altKey) scrollStep = (step * 0.1) / multiplier
+      let scrollStep = toStoredValue(step)
+      if (e.shiftKey) scrollStep = toStoredValue(step * 10)
+      else if (e.altKey) scrollStep = toStoredValue(step * 0.1)
 
       const newValue = clamp(valueRef.current + direction * scrollStep)
-      const finalValue = Number.parseFloat((newValue * multiplier).toFixed(precision)) / multiplier
+      const finalValue = roundStoredValueForDisplayPrecision(newValue)
 
       if (Math.abs(finalValue - valueRef.current) > 1e-6) {
         applyCommittedValue(finalValue)
@@ -98,7 +116,7 @@ export function MetricControl({
 
     container.addEventListener('wheel', handleWheel, { passive: false })
     return () => container.removeEventListener('wheel', handleWheel)
-  }, [isEditing, step, clamp, applyCommittedValue, precision, multiplier])
+  }, [isEditing, step, clamp, applyCommittedValue, toStoredValue, roundStoredValueForDisplayPrecision])
 
   useEffect(() => {
     if (!isHovered || isEditing) return
@@ -110,13 +128,12 @@ export function MetricControl({
 
       if (direction !== 0) {
         e.preventDefault()
-        let scrollStep = step / multiplier
-        if (e.shiftKey) scrollStep = (step * 10) / multiplier
-        else if (e.altKey) scrollStep = (step * 0.1) / multiplier
+        let scrollStep = toStoredValue(step)
+        if (e.shiftKey) scrollStep = toStoredValue(step * 10)
+        else if (e.altKey) scrollStep = toStoredValue(step * 0.1)
 
         const newValue = clamp(valueRef.current + direction * scrollStep)
-        const finalValue =
-          Number.parseFloat((newValue * multiplier).toFixed(precision)) / multiplier
+        const finalValue = roundStoredValueForDisplayPrecision(newValue)
 
         if (Math.abs(finalValue - valueRef.current) > 1e-6) {
           applyCommittedValue(finalValue)
@@ -126,7 +143,15 @@ export function MetricControl({
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [isHovered, isEditing, step, clamp, applyCommittedValue, precision, multiplier])
+  }, [
+    isHovered,
+    isEditing,
+    step,
+    clamp,
+    applyCommittedValue,
+    toStoredValue,
+    roundStoredValueForDisplayPrecision,
+  ])
 
   const handlePointerDown = useCallback(
     (e: React.PointerEvent) => {
@@ -143,14 +168,13 @@ export function MetricControl({
       const handlePointerMove = (moveEvent: PointerEvent) => {
         const deltaX = moveEvent.clientX - startXRef.current
 
-        let dragStep = step / multiplier
-        if (moveEvent.shiftKey) dragStep = (step * 10) / multiplier
-        else if (moveEvent.altKey) dragStep = (step * 0.1) / multiplier
+        let dragStep = toStoredValue(step)
+        if (moveEvent.shiftKey) dragStep = toStoredValue(step * 10)
+        else if (moveEvent.altKey) dragStep = toStoredValue(step * 0.1)
 
         const deltaValue = deltaX * dragStep
         const newValue = clamp(startValueRef.current + deltaValue)
-        const newFinalValue =
-          Number.parseFloat((newValue * multiplier).toFixed(precision)) / multiplier
+        const newFinalValue = roundStoredValueForDisplayPrecision(newValue)
 
         if (Math.abs(newFinalValue - finalValue) > 1e-6) {
           finalValue = newFinalValue
@@ -182,13 +206,23 @@ export function MetricControl({
       document.addEventListener('pointermove', handlePointerMove)
       document.addEventListener('pointerup', handlePointerUp)
     },
-    [isEditing, value, onChange, onCommit, restoreOnCommit, clamp, precision, step, multiplier],
+    [
+      isEditing,
+      value,
+      onChange,
+      onCommit,
+      restoreOnCommit,
+      clamp,
+      step,
+      toStoredValue,
+      roundStoredValueForDisplayPrecision,
+    ],
   )
 
   const handleValueClick = useCallback(() => {
     setIsEditing(true)
-    setInputValue((value * multiplier).toFixed(precision))
-  }, [value, multiplier, precision])
+    setInputValue(toDisplayValue(value).toFixed(precision))
+  }, [value, toDisplayValue, precision])
 
   const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value)
@@ -197,12 +231,12 @@ export function MetricControl({
   const submitValue = useCallback(() => {
     const numValue = Number.parseFloat(inputValue)
     if (Number.isNaN(numValue)) {
-      setInputValue((value * multiplier).toFixed(precision))
+      setInputValue(toDisplayValue(value).toFixed(precision))
     } else {
-      applyCommittedValue(clamp(numValue / multiplier))
+      applyCommittedValue(clamp(toStoredValue(numValue)))
     }
     setIsEditing(false)
-  }, [inputValue, applyCommittedValue, clamp, multiplier, value, precision])
+  }, [inputValue, applyCommittedValue, clamp, toStoredValue, value, precision, toDisplayValue])
 
   const handleInputBlur = useCallback(() => {
     submitValue()
@@ -213,21 +247,21 @@ export function MetricControl({
       if (e.key === 'Enter') {
         submitValue()
       } else if (e.key === 'Escape') {
-        setInputValue((value * multiplier).toFixed(precision))
+        setInputValue(toDisplayValue(value).toFixed(precision))
         setIsEditing(false)
       } else if (e.key === 'ArrowUp') {
         e.preventDefault()
-        const newV = clamp(value + step / multiplier)
+        const newV = clamp(value + toStoredValue(step))
         applyCommittedValue(newV)
-        setInputValue((newV * multiplier).toFixed(precision))
+        setInputValue(toDisplayValue(newV).toFixed(precision))
       } else if (e.key === 'ArrowDown') {
         e.preventDefault()
-        const newV = clamp(value - step / multiplier)
+        const newV = clamp(value - toStoredValue(step))
         applyCommittedValue(newV)
-        setInputValue((newV * multiplier).toFixed(precision))
+        setInputValue(toDisplayValue(newV).toFixed(precision))
       }
     },
-    [submitValue, value, multiplier, precision, step, clamp, applyCommittedValue],
+    [submitValue, value, toDisplayValue, precision, step, clamp, applyCommittedValue, toStoredValue],
   )
 
   return (

packages/editor/src/index.tsx

@@ -210,6 +210,14 @@ export {
   getActivePaintMaterialLabel,
   hasActivePaintMaterial,
 } from './lib/material-paint'
+export {
+  formatLinearMeasurement,
+  getLinearUnitLabel,
+  type LinearUnit,
+  linearControlValueToMeters,
+  linearUnitToMeters,
+  metersToLinearUnit,
+} from './lib/measurements'
 export {
   addFreshPlacementMetadata,
   getPlacementMetadataRecord,