diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx index bb5209eb..4ce869b6 100644 --- a/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx +++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx @@ -38,6 +38,11 @@ import { } from './../../../../../lib/level-duplication' import { getDefaultLevelName } from '@pascal-app/core' import { deleteLevelWithFallbackSelection } from './../../../../../lib/level-selection' +import { + getLinearUnitLabel, + linearUnitToMeters, + metersToLinearUnit, +} from './../../../../../lib/measurements' import { createLocalGuideImage } from './../../../../../lib/local-guide-image' import { cn } from './../../../../../lib/utils' import useEditor from './../../../../../store/use-editor' @@ -93,6 +98,7 @@ const PropertyLineSection = memo(function PropertyLineSection() { const updateNode = useScene((state) => state.updateNode) const mode = useEditor((state) => state.mode) const setMode = useEditor((state) => state.setMode) + const viewerUnit = useViewer((state) => state.unit) if (!siteNode) return null @@ -101,6 +107,14 @@ const PropertyLineSection = memo(function PropertyLineSection() { const perimeter = calculatePerimeter(points) const isEditing = mode === 'edit' + // Property-line coordinates and readouts follow the metric/imperial toggle. + const isImperial = viewerUnit === 'imperial' + const linearLabel = getLinearUnitLabel(viewerUnit) + const toDisplayLinear = (meters: number) => metersToLinearUnit(meters, viewerUnit) + const toStoredLinear = (display: number) => linearUnitToMeters(display, viewerUnit) + const displayArea = isImperial ? area * 10.763_910_417 : area + const displayPerimeter = toDisplayLinear(perimeter) + const handleToggleEdit = () => { setMode(isEditing ? 'select' : 'edit') } @@ -166,10 +180,16 @@ const PropertyLineSection = memo(function PropertyLineSection() { {/* Measurements */}