HoopsToolsMeasurementItemElement

class wvc.HoopsToolsMeasurementItemElement()

Displays a single measurement item with its value, icon, and remove functionality.

This component renders measurement data in a compact, user-friendly format within the measurement list.

Features:

  • Automatic icon selection based on measurement type
  • Formatted measurement value display
  • Interactive remove button with confirmation
  • Tooltip with full measurement details
  • Error handling for invalid or corrupted measurement data
  • Support for multiple measurement types (Point-to-Point, Face-to-Face, Angle, Edge Length)

The component uses a configuration map to determine the appropriate icon and labels for each measurement type, making it easy to extend with new measurement types.

Examples

<hoops-tools-measurement-item></hoops-tools-measurement-item>

<script>
  const item = document.getElementsByTagName('hoops-tools-measurement-item')[0];
  item.measurement = measurementObject;
  item.addEventListener('hoops-measurement-remove-command', (event) => {
    console.log('Remove measurement:', event.detail.measurement);
  });
</script>

Custom Element

hoops-tools-measurement-item

Attributes

measurement

The measurement object to display

Events

hoops-measurement-remove-command

Dispatched when the remove button is clicked

Since

2025.7.0

Constructors

wvc.HoopsToolsMeasurementItemElement.constructor()
HoopsToolsMeasurementItemElement(): HoopsToolsMeasurementItemElement

Returns: HoopsToolsMeasurementItemElement

Properties

wvc.HoopsToolsMeasurementItemElement.measurement

optional

measurement: MeasureMarkup

Methods

wvc.HoopsToolsMeasurementItemElement.dispatchRemoval()
dispatchRemoval(measurement: MeasureMarkup): void

Parameters

measurement: MeasureMarkup

Returns: void

wvc.HoopsToolsMeasurementItemElement.getMeasureMarkupIcon()
getMeasureMarkupIcon(markup: MeasureMarkup): TemplateResult

Parameters

markup: MeasureMarkup

Returns: TemplateResult

wvc.HoopsToolsMeasurementItemElement.getMeasureMarkupLabel()
getMeasureMarkupLabel(markup: MeasureMarkup): string

Parameters

markup: MeasureMarkup

Returns: string

wvc.HoopsToolsMeasurementItemElement.getMeasureMarkupValue()
getMeasureMarkupValue(markup: MeasureMarkup): string

Parameters

markup: MeasureMarkup

Returns: string