components/object-clipping/object-clipping.component.html

0001 <button #openBtn mat-icon-button matTooltip="Clipping Geometry"  (click)="openDialog()" class="panel-button">
0002   <mat-icon>crop</mat-icon>
0003 </button>
0004
0005 <ng-template #dialogTemplate>
0006   <button mat-dialog-close aria-label="Close dialog" class="close-round-btn">
0007     <mat-icon>close</mat-icon>
0008   </button>
0009
0010   <div class="mat-menu custom-position-dialog" >
0011     <div class="clipping-buttons">
0012       <!-- Toggle Clipping -->
0013       <button
0014         mat-menu-item
0015         (click)="
0016           $event.stopPropagation();
0017           clippingCheckbox._inputElement.nativeElement.click()
0018         "
0019       >
0020         <mat-checkbox
0021           #clippingCheckbox
0022           [checked]="clippingEnabled"
0023           (click)="$event.stopPropagation()"
0024           (change)="toggleClipping($event)"
0025         >
0026           Clipping
0027         </mat-checkbox>
0028
0029       </button>
0030       <div class="angle-presets">
0031           <button mat-icon-button style="box-shadow: var(--mat-sys-level2);"
0032             (click)="changeStartClippingAngle(0); changeOpeningClippingAngle(180)"
0033             [disabled]="!clippingEnabled"
0034             matTooltip="Half Horizontal (0°-180°)">
0035             <svg viewBox="0 0 24 24" style="width:24px;height:24px">
0036               <circle cx="12" cy="12" r="10" fill="#f0f0f0" stroke="#cccccc" stroke-width="1"/>
0037               <path d="M22 12 A10 10 0 0 1 2 12 L12 12 Z" fill="#bec2ff" stroke="none" stroke-width="1"/>
0038             </svg>
0039
0040           </button>
0041           <button mat-icon-button style="box-shadow: var(--mat-sys-level2);"
0042             (click)=" changeStartClippingAngle(90); changeOpeningClippingAngle(180)"
0043             [disabled]="!clippingEnabled"
0044             matTooltip="Half Vertical (90°-180°)">
0045             <svg viewBox="0 0 24 24" style="width:24px;height:24px">
0046               <circle cx="12" cy="12" r="10" fill="#bec2ff" stroke="#cccccc" stroke-width="1"/>
0047               <path d="M12 2 A10 10 0 0 1 12 22 L12 12 Z" fill="#f0f0f0" stroke="none" stroke-width="1"/>
0048             </svg>
0049           </button>
0050           <button mat-icon-button style="box-shadow: var(--mat-sys-level2);"
0051             (click)="changeStartClippingAngle(90); changeOpeningClippingAngle(90)"
0052             [disabled]="!clippingEnabled"
0053             matTooltip="Three Quarters (90°-90°)">
0054             <svg viewBox="0 0 24 24" style="width:24px;height:24px">
0055               <circle cx="12" cy="12" r="10" fill="#bec2ff" stroke="#cccccc" stroke-width="1"/>
0056               <path d="M12 12 L12 2 A10 10 0 0 1 22 12 L12 12 Z" fill="#f0f0f0" stroke="none" stroke-width="1"/>
0057             </svg>
0058           </button>
0059       </div>
0060     </div>
0061
0062     <!-- Opening Angle Slider -->
0063     <button
0064       class="slider-btn"
0065       mat-menu-item
0066       [disabled]="!clippingEnabled"
0067     >
0068       <mat-slider min="0" max="360" step="1">
0069         <input
0070           matSliderThumb
0071           [value]="openingClippingAngle"
0072           (input)="onSliderInput($event, 'opening')"
0073           (valueChange)="changeOpeningClippingAngle($event)"
0074         />
0075       </mat-slider>
0076
0077       Opening Angle
0078
0079       <input
0080         class="angle-value-input"
0081         type="number"
0082         [value]="openingClippingAngle"
0083         [disabled]="!clippingEnabled"
0084         (input)="openingClippingAngle = $any($event.target).valueAsNumber"
0085         (change)="changeOpeningClippingAngle(openingClippingAngle)"
0086       />
0087     </button>
0088
0089
0090     <div class="preset-buttons" [class.disabled]="!clippingEnabled">
0091       <button mat-menu-item
0092               (click)="changeOpeningClippingAngle(90)"
0093               [disabled]="!clippingEnabled">
0094         90°
0095       </button>
0096       <button mat-menu-item
0097               (click)="changeOpeningClippingAngle(180)"
0098               [disabled]="!clippingEnabled">
0099         180°
0100       </button>
0101       <button mat-menu-item
0102               (click)="changeOpeningClippingAngle(270)"
0103               [disabled]="!clippingEnabled">
0104         270°
0105       </button>
0106     </div>
0107
0108
0109
0110     <!-- Start Angle Slider -->
0111     <button
0112       class="slider-btn"
0113       mat-menu-item
0114       [disabled]="!clippingEnabled"
0115     >
0116       <mat-slider min="0" max="360" step="1" thumbLabel>
0117         <input
0118           matSliderThumb
0119           [value]="startClippingAngle"
0120           (input)="onSliderInput($event, 'start')"
0121           (valueChange)="changeStartClippingAngle($event)"
0122         />
0123       </mat-slider>
0124
0125       Start Angle
0126
0127       <input
0128         class="angle-value-input"
0129         type="number"
0130         [value]="startClippingAngle"
0131         [disabled]="!clippingEnabled"
0132         (input)="startClippingAngle = $any($event.target).valueAsNumber"
0133         (change)="changeStartClippingAngle(startClippingAngle)"
0134       />
0135     </button>
0136
0137
0138     <div class="preset-buttons" [class.disabled]="!clippingEnabled">
0139       <button mat-menu-item
0140               (click)="changeStartClippingAngle(0)"
0141               [disabled]="!clippingEnabled">
0142         0°
0143       </button>
0144       <button mat-menu-item
0145               (click)="changeStartClippingAngle(90)"
0146               [disabled]="!clippingEnabled">
0147         90°
0148       </button>
0149       <button mat-menu-item
0150               (click)="changeStartClippingAngle(180)"
0151               [disabled]="!clippingEnabled">
0152         180°
0153       </button>
0154       <button mat-menu-item
0155               (click)="changeStartClippingAngle(270)"
0156               [disabled]="!clippingEnabled">
0157         270°
0158       </button>
0159     </div>
0160     <div class="dialog-actions">
0161         <button mat-raised-button mat-dialog-close class="close-btn">Apply</button>
0162     </div>
0163
0164   </div>
0165
0166
0167 </ng-template>
0168
0169
0170
0171 <!--    <button mat-raised-button [matMenuTriggerFor]="menu" matTooltip="Clipping configuration">-->
0172 <!--      <mat-icon>crop</mat-icon>-->
0173 <!--    </button>-->