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 mat-icon-button class="toggle-button panel-button"  matTooltip="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 mat-icon-button
0011           class="panel-button"
0012           matTooltip="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 mat-icon-button
0024           class=" panel-button"
0025           matTooltip="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         <!-- Event data over geometry (tracks always visible) vs normal depth -->
0036         <button mat-icon-button
0037           class="panel-button"
0038           [matTooltip]="tracksOnTop() ? 'Event on top is ON — switch to normal depth' : 'Draw event data on top of geometry'"
0039           (click)="toggleTracksOnTop()"
0040         >
0041           <mat-icon>{{ tracksOnTop() ? 'flip_to_back' : 'flip_to_front' }}</mat-icon>
0042         </button>
0043
0044         <!-- The ViewOptionsComponent (for grid, axis toggles, etc.) -->
0045         <app-custom-view-options></app-custom-view-options>
0046
0047         <!-- Switch Orthographic/Perspective -->
0048         <button mat-icon-button
0049           class=" panel-button"
0050           matTooltip="Switch orthographic/perspective camera"
0051           (click)="switchMainView()"
0052         >
0053           <mat-icon>view_in_ar</mat-icon>
0054         </button>
0055
0056         <!-- Camera Controls (lil-gui) -->
0057         <button mat-icon-button
0058           class="panel-button"
0059           matTooltip="Toggle camera controls"
0060           (click)="onCameraControlsToggle()"
0061         >
0062           <mat-icon>videocam</mat-icon>
0063         </button>
0064       </div>
0065     </div>
0066   </div>
0067 </div>