Bounding box shows dimension length labels with measurement units

[JulieWinchester]

Builds on existing PRs #17 and #18, those should be reviewed and decided on first.

This PR:

• Adds <BoundsText> component to display bounding box edge length labels with measurement units (see screenshot)
• Adds a new attribute to <Viewer>, measurementUnits, for setting the initial measurement unit setting.
• Styles measurement labels, rounding the corners and adding a small black border.
• Moves some annotation and object measurement functions relating to screen position and intersects into Utils, since functions were previously duplicated between these two modules.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
aleph-r3f	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 15, 2025 4:19pm

[Copilot]

Copilot reviewed 29 out of 30 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

• package.json: Language not supported

[Copilot]

Pull Request Overview

This PR adds a new BoundsText component for displaying bounding box dimension labels with measurement units and updates related measurement, annotation, and scene tools while refactoring duplicated utility functions and state management.

• Adds BoundsText component and new measurement label styling
• Introduces a SourceSelector component and updates the Viewer configuration to support collections
• Refactors annotation, object measurements, and scene controls (including removal of deprecated components)

Reviewed Changes

Copilot reviewed 29 out of 30 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/components/ui/button.tsx	Adds a new button variant (iconSm) for consistent icon sizing
src/components/tab.tsx	Removes DisplayControls from Tab for a cleaner layout
src/components/source-selector.tsx	Introduces a new source selection component for handling model collections
src/components/screen-measurement-tools.tsx	Updates label positioning offsets for measurement labels
src/components/scene-tab.tsx	Removes legacy selectors and adds new selectors (e.g., CameraModeSelector, SourceSelector)
src/components/scene-controls-selector.tsx	Removes the deprecated scene controls component
src/components/rotation-controls-selector.tsx	Adds a new controls component to handle rotation controls
src/components/rotation-axes-selector.tsx	Simplifies layout by removing the Label component and adjusting container styling
src/components/object-measurement-tools.tsx	Updates function calls to new calculateScreenPosition and isFacingCamera signatures
src/components/measurement-tab.tsx	Adds CameraModeSelector for improved measurement tab functionality
src/components/gltf.tsx	Uses Clone component instead of primitive for rendering glTF models
src/components/control-toolbar.tsx	Implements a new toolbar with toggle and recenter actions for scene controls
src/components/bounds-text.tsx	Adds and positions bounding box dimension labels using measurement units
src/components/boolean-selector.tsx	Removes a redundant prop for cleaner UI layout
src/components/annotation-tools.tsx	Refactors annotation positioning and interaction logic with improved utility usage
src/components/annotation-toolbar.tsx	Implements a new annotation navigation toolbar
src/components/annotation-tab.tsx	Minor UI and text refinements in the annotation tab
src/Store.ts	Updates state management (renaming sceneControlsEnabled to rotationControlsEnabled, etc.)
src/App.tsx	Adjusts configuration to support srcCollections and cleans up unused code/comments

Files not reviewed (1)

• package.json: Language not supported

Comments suppressed due to low confidence (3)

src/components/rotation-axes-selector.tsx:3

• [nitpick] The removal of the Label component and adjustment of container padding may unintentionally affect the intended header styling for rotation controls. Please confirm that this UI change is as expected.

import { InputSelector } from './input-selector';

src/App.tsx:175

• [nitpick] The commented code toggling between a single 'src' and 'srcCollections' might cause confusion. Consider adding clear documentation or removing ambiguity to ensure developers understand which configuration should be used.

// src={config.src} // Uncomment this line and comment srcCollections to load single src

src/components/screen-measurement-tools.tsx:83

• The change from an x-offset of avgX - 30 to avgX - 50 could affect the visual alignment of measurement labels. Please verify that the adjusted offset is intentional and visually correct.

x={avgX - 50}