.. role:: clio-optional
   :class: clio-flag clio-flag-optional


#################################
HoopsCuttingSectionToolbarElement
#################################

.. js:class:: wvc.HoopsCuttingSectionToolbarElement

   A comprehensive toolbar component for managing cutting section operations.
   
   This component provides a complete interface for cutting section management, including:
   
   
   - Dropdown menu for creating cutting planes with various orientation presets
   - Support for axis-aligned planes (X, Y, Z axes)
   - Face-based plane creation using selected geometry
   - Custom plane creation with arbitrary orientation
   - Section-wide operations (visibility toggle, clear, activate/deactivate)
   - Visual feedback for section state and capacity limits
   
   The toolbar automatically updates when cutting sections change and provides intuitive controls for both novice and advanced users.
   
   .. rubric:: Examples
   
   
   .. code-block:: html
   
      <hoops-cutting-section-toolbar
        sectionIndex="0"
        .service=${cuttingService}>
      </hoops-cutting-section-toolbar>
   
   .. code-block:: typescript
   
      // Create and configure section toolbar
      const toolbar = document.createElement('hoops-cutting-section-toolbar');
      toolbar.sectionIndex = 0;
      toolbar.service = cuttingService;
      container.appendChild(toolbar);
   
   .. code-block:: html
   
      <!-- Toolbar with all sections -->
      <div class="cutting-sections">
        <hoops-cutting-section-toolbar sectionIndex="0" .service=${service}></hoops-cutting-section-toolbar>
        <hoops-cutting-section-toolbar sectionIndex="1" .service=${service}></hoops-cutting-section-toolbar>
      </div>
   
   .. rubric:: Custom Element
   
   
   ``hoops-cutting-section-toolbar``
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~wvc.HoopsCuttingSectionToolbarElement.constructor`
   
   .. rubric:: Properties
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:data:`~wvc.HoopsCuttingSectionToolbarElement.sectionIndex`
   * :js:data:`~wvc.HoopsCuttingSectionToolbarElement.service`
   
   



.. rst-class:: kind-group kind-constructors

.. rubric:: Constructors
   :class: kind-group-title


.. js:method:: wvc.HoopsCuttingSectionToolbarElement.constructor

      .. rst-class:: sig-pretty-signature
      
         | HoopsCuttingSectionToolbarElement(): :js:class:`HoopsCuttingSectionToolbarElement <wvc.HoopsCuttingSectionToolbarElement>`
      
      Constructs a new HoopsCuttingSectionToolbarElement.
      
      Initializes the component with default property values and binds the invalidateToolbar method for proper event handling context.
      
      **Returns**\ : :js:class:`HoopsCuttingSectionToolbarElement <wvc.HoopsCuttingSectionToolbarElement>`
      



.. rst-class:: kind-group kind-properties

.. rubric:: Properties
   :class: kind-group-title


.. js:data:: wvc.HoopsCuttingSectionToolbarElement.sectionIndex

      .. rst-class:: sig-pretty-signature
      
         | sectionIndex: *number*
      
      The index of the cutting section to manage with this toolbar. Used to identify which section's operations this toolbar controls.
      
      .. rubric:: Default
      
      
      `````ts
      -1
      `````
      



.. js:data:: wvc.HoopsCuttingSectionToolbarElement.service

      .. rst-class:: clio-flags
      
         :clio-optional:`optional`
      
      .. rst-class:: sig-pretty-signature
      
         | service: :js:class:`ICuttingService <wvc.ICuttingService>`
      
      The cutting service instance that provides cutting section operations. All toolbar operations are performed through this service interface. When undefined, the toolbar renders nothing.
      
      .. rubric:: Default
      
      
      `````ts
      undefined
      `````
      




