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

0001 <app-shell>
0002   <!-- Desktop header (all toolbar buttons) -->
0003   <ng-container header>
0004     <button mat-icon-button matTooltip="Toggle scene tree pane" (click)="toggleLeftPane()" class="panel-button">
0005       <mat-icon>{{ isLeftPaneOpen ? 'close' : 'account_tree' }}</mat-icon>
0006     </button>
0007
0008
0009     <!-- Event selector -->
0010     <app-custom-event-selector></app-custom-event-selector>
0011
0012     <!-- Toggle for clipping geometries -->
0013     <app-geometry-clipping></app-geometry-clipping>
0014
0015     <!-- Export scene to GLTF -->
0016     <app-scene-export></app-scene-export>
0017
0018     <app-object-raycast></app-object-raycast>
0019
0020     <app-legend-window></app-legend-window>
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 mobileHeader>
0028     <app-custom-event-selector></app-custom-event-selector>
0029   </ng-container>
0030
0031   <!-- Mobile tools menu (toolbar buttons in dropdown) -->
0032   <ng-container mobileTools>
0033     <button mat-button (click)="toggleLeftPane()">
0034       <mat-icon>{{ isLeftPaneOpen ? 'close' : 'account_tree' }}</mat-icon>
0035       Scene Tree
0036     </button>
0037
0038
0039     <app-geometry-clipping></app-geometry-clipping>
0040     <app-scene-export></app-scene-export>
0041     <app-object-raycast></app-object-raycast>
0042     <app-legend-window></app-legend-window>
0043   </ng-container>
0044
0045
0046   <div leftPane>
0047     <app-scene-tree (configureItem)="onConfigureItemClicked($event)"></app-scene-tree>
0048   </div>
0049
0050   <div centralPane>
0051     <!-- Central content area -->
0052     <div id="eventDisplay"></div>
0053     <app-tool-panel (cameraControlsToggle)="toggleCameraControls()"></app-tool-panel>
0054     <app-cube-viewport-control></app-cube-viewport-control>
0055   </div>
0056
0057   <div id="lilgui"></div>
0058
0059   <div rightPane>
0060     <app-painter-config-page *ngIf="isRightPaneOpen"></app-painter-config-page>
0061   </div>
0062
0063   <div footer-left class="hide-on-mobile">
0064     <app-perf-stats></app-perf-stats>
0065   </div>
0066 <div footer-right id="footerRight">
0067   <div class="loading-indicators">
0068     <!-- Dex JSON Loader -->
0069     @if(loadingDex()) {
0070       <div class="loader-container">
0071         <mat-spinner diameter="24" color="accent"></mat-spinner>
0072         <div class="loader-label">loading json</div>
0073       </div>
0074     }
0075
0076     <!-- EDM4EIC Loader -->
0077     @if(loadingEdm()) {
0078       <div class="loader-container">
0079         <mat-spinner diameter="24" color="accent"></mat-spinner>
0080         <div class="loader-label">loading root</div>
0081       </div>
0082     }
0083
0084     <!-- Geometry Loader -->
0085     @if(loadingGeometry()){
0086       <div class="loader-container">
0087         <mat-spinner diameter="24" color="accent"></mat-spinner>
0088         <div class="loader-label">loading geo</div>
0089       </div>
0090     }
0091
0092   </div>
0093   <div class="theme-text">{{message}}</div>
0094 </div>
0095
0096   <div footer>
0097     <div class="time-controls" id="bottom-controls">
0098       <app-animation-settings></app-animation-settings>
0099       <app-event-time-control></app-event-time-control>
0100
0101       <button mat-icon-button aria-label="Rewind" matTooltip="Rewind time to 0" class="tcontrol" (click)="eventDisplay.rewindTime()">
0102         <mat-icon>first_page</mat-icon>
0103       </button>
0104       <button mat-icon-button aria-label="Collision" matTooltip="Animate with beam particles collision" class="tcontrol" (click)="animateWithCollision()">
0105         <mat-icon>close_fullscreen</mat-icon>
0106       </button>
0107       <button mat-icon-button aria-label="Play" matTooltip="Play time forward" class="tcontrol" (click)="eventDisplay.animateTime()">
0108         <mat-icon>play_arrow</mat-icon>
0109       </button>
0110       <button mat-icon-button aria-label="Pause" matTooltip="Pause time playing" class="tcontrol" (click)="eventDisplay.stopTimeAnimation()" >
0111         <mat-icon>pause</mat-icon>
0112       </button>
0113       <button mat-icon-button aria-label="Stop" matTooltip="Stop and show all particles" class="tcontrol" (click)="eventDisplay.exitTimedDisplay()" >
0114         <mat-icon>stop</mat-icon>
0115       </button>
0116       <button mat-icon-button aria-label="Step" matTooltip="Step backward" (click)="eventDisplay.timeStepBack()" class="tcontrol">
0117         <mat-icon>chevron_left</mat-icon>
0118       </button>
0119       <button mat-icon-button aria-label="Step" matTooltip="Step forward" (click)="eventDisplay.timeStep()" class="tcontrol">
0120         <mat-icon>chevron_right</mat-icon>
0121       </button>
0122 <!--      <button mat-raised-button aria-label="Rewind" matTooltip="Play random NEXT EVENT" class="tcontrol" (click)="nextRandomEvent()">-->
0123 <!--        <mat-icon>last_page</mat-icon>-->
0124 <!--      </button>-->
0125
0126 <!--      <button mat-raised-button aria-label="Stop" matTooltip="Cycle through DETECTOR subsystems" class="tcontrol" (click)="cycleGeometry()" >-->
0127 <!--        <mat-icon>view_in_ar</mat-icon>-->
0128 <!--      </button>-->
0129
0130       <div class="theme-text">{{currentGeometry}}</div>
0131     </div>
0132   </div>
0133 </app-shell>