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           (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]="openingAngle()"
0083         [disabled]="!clippingEnabled()"
0084         (input)="changeOpeningClippingAngle($any($event.target).valueAsNumber)"
0085         (change)="changeOpeningClippingAngle(openingAngle())"
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">
0117         <input
0118           matSliderThumb
0119           [value]="startAngle()"
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]="startAngle()"
0131         [disabled]="!clippingEnabled()"
0132         (input)="changeStartClippingAngle($any($event.target).valueAsNumber)"
0133         (change)="changeStartClippingAngle(startAngle())"
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     <!-- Z Clipping -->
0161     <button
0162       mat-menu-item
0163       (click)="
0164         $event.stopPropagation();
0165         zClippingCheckbox._inputElement.nativeElement.click()
0166       "
0167     >
0168       <mat-checkbox
0169         #zClippingCheckbox
0170         [checked]="zClippingEnabled()"
0171         (click)="$event.stopPropagation()"
0172         (change)="toggleZClipping($event)"
0173       >
0174         Z Clipping
0175       </mat-checkbox>
0176     </button>
0177
0178     <button
0179       class="slider-btn"
0180       mat-menu-item
0181       [disabled]="!zClippingEnabled()"
0182     >
0183       Z Position
0184       <input
0185         class="angle-value-input"
0186         type="number"
0187         [value]="zClippingPosition()"
0188         [disabled]="!zClippingEnabled()"
0189         (input)="changeZClippingPosition($any($event.target).valueAsNumber)"
0190         (change)="changeZClippingPosition(zClippingPosition())"
0191       />
0192     </button>
0193
0194     <button
0195       mat-menu-item
0196       [disabled]="!zClippingEnabled()"
0197       (click)="$event.stopPropagation()"
0198     >
0199       <span class="z-direction-row">
0200         Backward
0201         <mat-slide-toggle
0202           [checked]="zClippingForward()"
0203           [disabled]="!zClippingEnabled()"
0204           (change)="toggleZClippingDirection($event)"
0205         ></mat-slide-toggle>
0206         Forward
0207       </span>
0208     </button>
0209
0210     <div class="dialog-actions">
0211         <button mat-raised-button mat-dialog-close class="close-btn">Apply</button>
0212     </div>
0213
0214   </div>
0215
0216
0217 </ng-template>
0218
0219
0220
0221 <!--    <button mat-raised-button [matMenuTriggerFor]="menu" matTooltip="Clipping configuration">-->
0222 <!--      <mat-icon>crop</mat-icon>-->
0223 <!--    </button>-->