components/tool-panel/tool-panel.component.html

0001 <div class="tool-panel-wrapper">
0002   <div class="tool-panel" [class.collapsed]="isCollapsed">
0003     <div class="content">
0004       <button class="icon-button toggle-button" title="Toggle Panel" (click)="togglePanel()">
0005         <mat-icon>{{ isCollapsed ? 'keyboard_arrow_left' : 'keyboard_arrow_right' }}</mat-icon>
0006       </button>
0007
0008       <div class="action-buttons" *ngIf="!isCollapsed">
0009         <!-- Zoom In -->
0010         <button
0011           class="icon-button"
0012           title="Zoom In"
0013           (click)="onLeftClick($event, 'zoomIn')"
0014           (mouseup)="clearZoom()"
0015           (mouseleave)="clearZoom()"
0016           (touchend)="clearZoom()"
0017           (touchcancel)="clearZoom()"
0018         >
0019           <mat-icon>zoom_in</mat-icon>
0020         </button>
0021
0022         <!-- Zoom Out -->
0023         <button
0024           class="icon-button"
0025           title="Zoom Out"
0026           (click)="onLeftClick($event, 'zoomOut')"
0027           (mouseup)="clearZoom()"
0028           (mouseleave)="clearZoom()"
0029           (touchend)="clearZoom()"
0030           (touchcancel)="clearZoom()"
0031         >
0032           <mat-icon>zoom_out</mat-icon>
0033         </button>
0034
0035         <!-- The ViewOptionsComponent (for grid, axis toggles, etc.) -->
0036         <app-custom-view-options></app-custom-view-options>
0037
0038         <!-- Switch Orthographic/Perspective -->
0039         <button
0040           class="icon-button"
0041           title="Switch orthographic/perspective camera"
0042           (click)="switchMainView()"
0043         >
0044           <mat-icon>view_in_ar</mat-icon>
0045         </button>
0046       </div>
0047     </div>
0048   </div>
0049 </div>