Measurement Creating Viewer Example

Table of Contents

• Preview
• What It Demonstrates
• User Flow
• Key Files
  • User Interface Components
  • Core Logic Classes

The Measurement Creating Viewer adds visual measurement authoring to the selection-capable viewer. It creates distance, angle, radial, bounding-box, coordinate, and polyline-length measurements from selected model geometry and keeps a React list synchronized with the scene. Drawing visualization remains available, but measurement creation is unavailable in drawing mode.

Preview

What It Demonstrates

Use this example to study measurement authoring:

• convert highlighted model references into measurement targets;
• register and create multiple measurement types;
• prevent or report duplicate measurements;
• synchronize hover and selection between the scene and measurement list;
• move, hide, show, delete, and clear measurements.

The shared measurement feature owns measurement instances, placement, geometry, materials, highlighting, keyboard interaction, duplicate detection, and the measurement scene attached to the viewport. The React page owns controls, list rendering, delete confirmation, and user-facing feedback.

User Flow

1. Load a model.
2. Select a measurement type and any options, such as radial notation.
3. Pick compatible geometry in the viewport.
4. Review the created measurement in the scene and side panel.
5. Select, move, hide, or delete measurements from either the scene or panel.

Key Files

User Interface Components

Source	Description
MeasurementCreatingViewer react/src/pages/measurement-creating-viewer/MeasurementCreatingViewer.tsx	Main page component. It configures measurement type options, listens to measurement manager events, renders measurement controls and measurement cards, and synchronizes panel selection with the scene.
VisualizationStatusSwitcher react/src/features/visualization-status-switcher/VisualizationStatusSwitcher.tsx	Keeps model/drawing visualization switching available while measurements are managed.
LabeledSelect, ButtonGroup, and shared controls react/src/common/ui/	Render measurement type, notation, visibility, and action controls.
useMeasurementVisualizationContext react/src/features/visualization-context/useMeasurementVisualizationContext.ts	Connects viewer state and measurement updates to React.

Core Logic Classes

Source	Description
MeasurementCreatingViewer shared/src/viewers/measurement-creating-viewer/MeasurementCreatingViewer.ts	Extends SelectionHandlingViewer with measurement state and model-target adaptation.
MeasurementManager shared/src/features/measurements/MeasurementManager.ts	Owns measurement creation, duplicate handling, selection, highlighting, movement, visibility, deletion, events, and disposal.
getModelMeasurementTarget() and ModelMeasurementObject shared/src/features/model/measurements/ModelMeasurementTargetAdapter.ts	Convert highlighted model references into generic measurement targets.
Measurement classes shared/src/features/measurements/	Implement distance, angle, radial, radial-dimension, bounding-box, coordinate, and polyline-length measurement behavior.
MeasurementTypeRegistry shared/src/features/measurements/MeasurementTypeRegistry.ts	Registers measurement type definitions used by the creation UI and manager.