components/geometry-clipping/geometry-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           Angular (Pie) 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]="openingAngle()"
0072           (valueChange)="changeOpeningClippingAngle($event)"
0073         />
0074       </mat-slider>
0075
0076       Opening Angle
0077
0078       <input
0079         class="angle-value-input"
0080         type="number"
0081         [value]="openingAngle()"
0082         [disabled]="!clippingEnabled()"
0083         (input)="changeOpeningClippingAngle($any($event.target).valueAsNumber)"
0084         (change)="changeOpeningClippingAngle(openingAngle())"
0085       />
0086     </button>
0087
0088
0089     <div class="preset-buttons" [class.disabled]="!clippingEnabled()">
0090       <button mat-menu-item
0091               (click)="changeOpeningClippingAngle(90)"
0092               [disabled]="!clippingEnabled()">
0093         90°
0094       </button>
0095       <button mat-menu-item
0096               (click)="changeOpeningClippingAngle(180)"
0097               [disabled]="!clippingEnabled()">
0098         180°
0099       </button>
0100       <button mat-menu-item
0101               (click)="changeOpeningClippingAngle(270)"
0102               [disabled]="!clippingEnabled()">
0103         270°
0104       </button>
0105     </div>
0106
0107
0108
0109     <!-- Start Angle Slider -->
0110     <button
0111       class="slider-btn"
0112       mat-menu-item
0113       [disabled]="!clippingEnabled()"
0114     >
0115       <mat-slider min="0" max="360" step="1">
0116         <input
0117           matSliderThumb
0118           [value]="startAngle()"
0119           (valueChange)="changeStartClippingAngle($event)"
0120         />
0121       </mat-slider>
0122
0123       Start Angle
0124
0125       <input
0126         class="angle-value-input"
0127         type="number"
0128         [value]="startAngle()"
0129         [disabled]="!clippingEnabled()"
0130         (input)="changeStartClippingAngle($any($event.target).valueAsNumber)"
0131         (change)="changeStartClippingAngle(startAngle())"
0132       />
0133     </button>
0134
0135
0136     <div class="preset-buttons" [class.disabled]="!clippingEnabled()">
0137       <button mat-menu-item
0138               (click)="changeStartClippingAngle(0)"
0139               [disabled]="!clippingEnabled()">
0140         0°
0141       </button>
0142       <button mat-menu-item
0143               (click)="changeStartClippingAngle(90)"
0144               [disabled]="!clippingEnabled()">
0145         90°
0146       </button>
0147       <button mat-menu-item
0148               (click)="changeStartClippingAngle(180)"
0149               [disabled]="!clippingEnabled()">
0150         180°
0151       </button>
0152       <button mat-menu-item
0153               (click)="changeStartClippingAngle(270)"
0154               [disabled]="!clippingEnabled()">
0155         270°
0156       </button>
0157     </div>
0158     <!-- Z Clipping -->
0159     <button
0160       mat-menu-item
0161       (click)="
0162         $event.stopPropagation();
0163         zClippingCheckbox._inputElement.nativeElement.click()
0164       "
0165     >
0166       <mat-checkbox
0167         #zClippingCheckbox
0168         [checked]="zClippingEnabled()"
0169         (click)="$event.stopPropagation()"
0170         (change)="toggleZClipping($event)"
0171       >
0172         Z Clipping
0173       </mat-checkbox>
0174     </button>
0175
0176     <button
0177       class="slider-btn"
0178       mat-menu-item
0179       [disabled]="!zClippingEnabled()"
0180     >
0181       Z Position
0182       <input
0183         class="angle-value-input"
0184         type="number"
0185         [value]="zClippingPosition()"
0186         [disabled]="!zClippingEnabled()"
0187         (input)="changeZClippingPosition($any($event.target).valueAsNumber)"
0188         (change)="changeZClippingPosition(zClippingPosition())"
0189       />
0190     </button>
0191
0192     <button
0193       mat-menu-item
0194       [disabled]="!zClippingEnabled()"
0195       (click)="$event.stopPropagation()"
0196     >
0197       <span class="z-direction-row">
0198         Backward
0199         <mat-slide-toggle
0200           [checked]="zClippingForward()"
0201           [disabled]="!zClippingEnabled()"
0202           (change)="toggleZClippingDirection($event)"
0203         ></mat-slide-toggle>
0204         Forward
0205       </span>
0206     </button>
0207
0208     <div class="dialog-actions">
0209         <button mat-raised-button mat-dialog-close class="close-btn">Apply</button>
0210     </div>
0211
0212   </div>
0213
0214
0215 </ng-template>
0216
0217
0218
0219 <!--    <button mat-raised-button [matMenuTriggerFor]="menu" matTooltip="Clipping configuration">-->
0220 <!--      <mat-icon>crop</mat-icon>-->
0221 <!--    </button>-->