pages/main-display/main-display.component.html

0001 <app-firebird-shell [(leftPaneVisible)]="leftPaneOpen" [(rightPaneVisible)]="rightPaneOpen">
0002   <!-- Desktop header (all toolbar buttons) -->
0003   <ng-container header>
0004     <!-- Event selector -->
0005     <app-custom-event-selector></app-custom-event-selector>
0006
0007     <!-- Open an event straight from a local EDM4eic/EDM4hep ROOT file -->
0008     <app-open-event></app-open-event>
0009
0010     <!-- Toggle for clipping geometries -->
0011     <app-geometry-clipping></app-geometry-clipping>
0012
0013     <!-- Export scene to GLTF -->
0014     <app-scene-export></app-scene-export>
0015
0016     <app-object-raycast></app-object-raycast>
0017
0018     <app-legend-window></app-legend-window>
0019
0020     <app-recording-menu></app-recording-menu>
0021
0022     <!-- Extra options -->
0023     <ng-content></ng-content>
0024   </ng-container>
0025
0026   <!-- Mobile header (only event selector visible in toolbar) -->
0027   <ng-container mobile-header>
0028     <app-custom-event-selector></app-custom-event-selector>
0029   </ng-container>
0030
0031   <!-- Mobile tools menu (toolbar buttons in dropdown) -->
0032   <ng-container mobile-tools>
0033     <app-open-event></app-open-event>
0034     <app-geometry-clipping></app-geometry-clipping>
0035     <app-scene-export></app-scene-export>
0036     <app-object-raycast></app-object-raycast>
0037     <app-legend-window></app-legend-window>
0038     <app-recording-menu></app-recording-menu>
0039   </ng-container>
0040
0041
0042   <div left-pane>
0043     <!-- Physics view (model tree) is the default; the scene tree stays as
0044          the debug view of the raw three.js hierarchy. -->
0045     <div class="tree-mode-switch">
0046       <button [class.active]="leftTreeMode() === 'model'" (click)="leftTreeMode.set('model')">Physics</button>
0047       <button [class.active]="leftTreeMode() === 'scene'" (click)="leftTreeMode.set('scene')">Scene</button>
0048     </div>
0049     @if (leftTreeMode() === 'model') {
0050       <app-model-tree></app-model-tree>
0051     } @else {
0052       <app-scene-tree (configureItem)="onConfigureItemClicked($event)"></app-scene-tree>
0053     }
0054   </div>
0055
0056   <div central-pane class="central-fill">
0057     <!-- Central content area -->
0058     <firebird-display id="eventDisplay" [autoLoad]="isAutoLoadOnInit" (attached)="onDisplayAttached()"></firebird-display>
0059     <app-tool-panel (cameraControlsToggle)="toggleCameraControls()"></app-tool-panel>
0060   </div>
0061
0062   <div id="lilgui"></div>
0063
0064   <div right-pane>
0065     @if (rightPaneOpen()) {
0066       <app-painter-config-panel></app-painter-config-panel>
0067     }
0068   </div>
0069
0070   <div footer-left class="hide-on-mobile">
0071     <app-perf-stats></app-perf-stats>
0072   </div>
0073 <div footer-right id="footerRight">
0074   <div class="loading-indicators">
0075     <!-- Dex JSON Loader -->
0076     @if(loadingDex()) {
0077       <div class="loader-container">
0078         <mat-spinner diameter="24" color="accent"></mat-spinner>
0079         <div class="loader-label">loading json</div>
0080       </div>
0081     }
0082
0083     <!-- EDM4EIC Loader -->
0084     @if(loadingEdm()) {
0085       <div class="loader-container">
0086         <mat-spinner diameter="24" color="accent"></mat-spinner>
0087         <div class="loader-label">loading root</div>
0088       </div>
0089     }
0090
0091     <!-- Geometry Loader -->
0092     @if(loadingGeometry()){
0093       <div class="loader-container">
0094         <mat-spinner diameter="24" color="accent"></mat-spinner>
0095         <div class="loader-label">loading geo</div>
0096       </div>
0097     }
0098
0099   </div>
0100   <div class="theme-text">{{message}}</div>
0101 </div>
0102
0103   <div footer-center>
0104     <div class="time-controls" id="bottom-controls">
0105       <app-animation-settings></app-animation-settings>
0106       <app-event-time-control></app-event-time-control>
0107
0108       <button mat-icon-button aria-label="Rewind" matTooltip="Rewind time to 0" class="tcontrol" (click)="eventDisplay.rewindTime()">
0109         <mat-icon>first_page</mat-icon>
0110       </button>
0111       @for (action of toolbarActions; track action.id) {
0112         <button mat-icon-button [attr.aria-label]="action.label" [matTooltip]="action.tooltip ?? ''" class="tcontrol" (click)="runToolbarAction(action)">
0113           <mat-icon>{{ action.icon }}</mat-icon>
0114         </button>
0115       }
0116       <button mat-icon-button aria-label="Play" matTooltip="Play time forward" class="tcontrol" (click)="eventDisplay.animateTime()">
0117         <mat-icon>play_arrow</mat-icon>
0118       </button>
0119       <button mat-icon-button aria-label="Pause" matTooltip="Pause time playing" class="tcontrol" (click)="eventDisplay.stopTimeAnimation()" >
0120         <mat-icon>pause</mat-icon>
0121       </button>
0122       <button mat-icon-button aria-label="Stop" matTooltip="Stop and show all particles" class="tcontrol" (click)="eventDisplay.exitTimedDisplay()" >
0123         <mat-icon>stop</mat-icon>
0124       </button>
0125       <button mat-icon-button aria-label="Step" matTooltip="Step backward" (click)="eventDisplay.timeStepBack()" class="tcontrol">
0126         <mat-icon>chevron_left</mat-icon>
0127       </button>
0128       <button mat-icon-button aria-label="Step" matTooltip="Step forward" (click)="eventDisplay.timeStep()" class="tcontrol">
0129         <mat-icon>chevron_right</mat-icon>
0130       </button>
0131 <!--      <button mat-raised-button aria-label="Rewind" matTooltip="Play random NEXT EVENT" class="tcontrol" (click)="nextRandomEvent()">-->
0132 <!--        <mat-icon>last_page</mat-icon>-->
0133 <!--      </button>-->
0134
0135 <!--      <button mat-raised-button aria-label="Stop" matTooltip="Cycle through DETECTOR subsystems" class="tcontrol" (click)="cycleGeometry()" >-->
0136 <!--        <mat-icon>view_in_ar</mat-icon>-->
0137 <!--      </button>-->
0138
0139       <div class="theme-text">{{currentGeometry}}</div>
0140     </div>
0141   </div>
0142 </app-firebird-shell>