HoopsCuttingSectionElement

class wvc.HoopsCuttingSectionElement()

A comprehensive cutting section component that manages multiple cutting planes as a group.

This component provides a complete interface for a cutting section, which is a collection of cutting planes that work together. It includes:

  • Collapsible accordion display with section labeling
  • Integrated toolbar for section-wide operations (add planes, visibility, clear, activate)
  • Dynamic list of cutting plane components within the section
  • Automatic expansion when new planes are added
  • Real-time synchronization with cutting service events

The component uses an accordion layout where the header shows the section name and toolbar, and the content area contains a dynamic list of cutting plane components. The section automatically expands when planes are added to provide immediate visual feedback.

Examples

<hoops-cutting-section sectionIndex="0" label="Primary Section"></hoops-cutting-section>

<script>
  const section = document.getElementsByTagName('hoops-cutting-section')[0];
  section.service = cuttingService;
</script>

Custom Element

hoops-cutting-section

Attributes

sectionIndex

The index of the cutting section to display

label

The display label shown in the accordion header

Slots

header

Slot for the section header content displaying the section label

toolbar

Slot for the section toolbar with operation buttons (add, visibility, clear, activate)

content

Slot for the cutting plane components within this section

CSS Properties

–hoops-neutral-background-20

Background color for the content area

Since

2025.8.0

Index

Constructors

Properties

Constructors

wvc.HoopsCuttingSectionElement.constructor()
HoopsCuttingSectionElement(): HoopsCuttingSectionElement

Constructs a new HoopsCuttingSectionElement.

Initializes the component with default property values and binds event handler methods for proper context preservation.

Returns: HoopsCuttingSectionElement

Properties

wvc.HoopsCuttingSectionElement.label
label: string

The display label for the cutting section shown in the accordion header. Provides a human-readable name for the section to help users identify different sections in multi-section scenarios.

Default

```ts "" ```

wvc.HoopsCuttingSectionElement.sectionIndex
sectionIndex: number

The index of the cutting section to display and manage. Used to identify which section’s data and operations this component handles.

Default

```ts 0 ```

wvc.HoopsCuttingSectionElement.service

optional

service: ICuttingService

The cutting service instance that provides cutting section operations. All section and plane operations are performed through this service interface. When undefined, the component renders nothing.

Default

```ts undefined ```