metersToLinearUnit(meters, viewerUnit)
const toStoredLinear = (display: number) => linearUnitToMeters(display, viewerUnit)
- const displayArea = isImperial ? area * 10.763_910_417 : area
+ const displayArea = squareMetersToAreaUnit(area, viewerUnit)
const displayPerimeter = toDisplayLinear(perimeter)
const handleToggleEdit = () => {
@@ -182,7 +185,7 @@ const PropertyLineSection = memo(function PropertyLineSection() {
Area:{' '}
- {displayArea.toFixed(1)} {isImperial ? 'ft²' : 'm²'}
+ {displayArea.toFixed(1)} {getAreaUnitLabel(viewerUnit)}
@@ -1117,6 +1120,7 @@ const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLa
const setHoveredId = useViewer((state) => state.setHoveredId)
const setPhase = useEditor((state) => state.setPhase)
const setMode = useEditor((state) => state.setMode)
+ const unit = useViewer((state) => state.unit)
const isSelected = selectedZoneId === zone.id
const isHovered = hoveredId === zone.id
@@ -1129,8 +1133,7 @@ const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLa
}
}, [isSelected])
- const area = calculatePolygonArea(zone.polygon).toFixed(1)
- const defaultName = `Zone (${area}m²)`
+ const defaultName = `Zone (${formatAreaLabel(calculatePolygonArea(zone.polygon), unit)})`
const handleClick = () => {
setSelection({ zoneId: zone.id })
diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx
index 627dc8dd9..bd5339c78 100644
--- a/packages/editor/src/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx
@@ -2,6 +2,7 @@ import { type AnyNodeId, type SlabNode, useScene } from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import Image from 'next/image'
import { memo, useCallback, useState } from 'react'
+import { formatAreaLabel } from './../../../../../lib/measurements'
import useEditor from './../../../../../store/use-editor'
import { InlineRenameInput } from './inline-rename-input'
import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
@@ -25,6 +26,7 @@ export const SlabTreeNode = memo(function SlabTreeNode({
const isHovered = useViewer((state) => state.hoveredId === nodeId)
const setSelection = useViewer((state) => state.setSelection)
const setHoveredId = useViewer((state) => state.setHoveredId)
+ const unit = useViewer((state) => state.unit)
const handleClick = useCallback(
(e: React.MouseEvent) => {
@@ -45,8 +47,7 @@ export const SlabTreeNode = memo(function SlabTreeNode({
const handleStartEditing = useCallback(() => setIsEditing(true), [])
const handleStopEditing = useCallback(() => setIsEditing(false), [])
- const area = calculatePolygonArea(polygon).toFixed(1)
- const defaultName = `Slab (${area}m²)`
+ const defaultName = `Slab (${formatAreaLabel(calculatePolygonArea(polygon), unit)})`
return (
state.hoveredId === nodeId)
const setSelection = useViewer((state) => state.setSelection)
const setHoveredId = useViewer((state) => state.setHoveredId)
+ const unit = useViewer((state) => state.unit)
const handleClick = useCallback(() => setSelection({ zoneId: nodeId }), [nodeId, setSelection])
const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
@@ -34,9 +36,7 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
const handleStartEditing = useCallback(() => setIsEditing(true), [])
const handleStopEditing = useCallback(() => setIsEditing(false), [])
- // Calculate approximate area from polygon
- const area = calculatePolygonArea(polygon).toFixed(1)
- const defaultName = `Zone (${area}m²)`
+ const defaultName = `Zone (${formatAreaLabel(calculatePolygonArea(polygon), unit)})`
return (
{
@@ -73,3 +76,22 @@ describe('linear measurements', () => {
expect(getLinearUnitLabel('imperial')).toBe('ft')
})
})
+
+describe('area measurements', () => {
+ test('converts square meters to the active area unit', () => {
+ expect(squareMetersToAreaUnit(0, 'imperial')).toBe(0)
+ expect(squareMetersToAreaUnit(12.5, 'metric')).toBe(12.5)
+ expect(squareMetersToAreaUnit(1, 'imperial')).toBeCloseTo(10.7639)
+ })
+
+ test('returns the display label for area readouts', () => {
+ expect(getAreaUnitLabel('metric')).toBe('m²')
+ expect(getAreaUnitLabel('imperial')).toBe('ft²')
+ })
+
+ test('formats an area label with value and unit', () => {
+ expect(formatAreaLabel(12.34, 'metric')).toBe('12.3m²')
+ expect(formatAreaLabel(1, 'imperial')).toBe('10.8ft²')
+ expect(formatAreaLabel(12.34, 'metric', 2)).toBe('12.34m²')
+ })
+})
diff --git a/packages/editor/src/lib/measurements.ts b/packages/editor/src/lib/measurements.ts
index d53e61f4c..76e31338c 100644
--- a/packages/editor/src/lib/measurements.ts
+++ b/packages/editor/src/lib/measurements.ts
@@ -32,6 +32,24 @@ export function getLinearUnitLabel(unit: LinearUnit): string {
return unit === 'imperial' ? 'ft' : 'm'
}
+const SQUARE_FEET_PER_SQUARE_METER = FEET_PER_METER * FEET_PER_METER
+
+export function squareMetersToAreaUnit(squareMeters: number, unit: LinearUnit): number {
+ return unit === 'imperial' ? squareMeters * SQUARE_FEET_PER_SQUARE_METER : squareMeters
+}
+
+export function getAreaUnitLabel(unit: LinearUnit): string {
+ return unit === 'imperial' ? 'ft²' : 'm²'
+}
+
+export function formatAreaLabel(
+ squareMeters: number,
+ unit: LinearUnit,
+ fractionDigits = 1,
+): string {
+ return `${squareMetersToAreaUnit(squareMeters, unit).toFixed(fractionDigits)}${getAreaUnitLabel(unit)}`
+}
+
export function formatLinearMeasurement(meters: number, unit: LinearUnit): string {
if (!Number.isFinite(meters)) return '--'
diff --git a/packages/mcp/package.json b/packages/mcp/package.json
index 13cadbb3b..704b08692 100644
--- a/packages/mcp/package.json
+++ b/packages/mcp/package.json
@@ -59,7 +59,7 @@
},
"dependencies": {
"@modelcontextprotocol/sdk": "^1.29.0",
- "@pascal-app/lingo": "^0.1.0",
+ "@pascal-app/lingo": "^0.2.0",
"zod": "^4.3.5"
},
"devDependencies": {