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

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