AltitudeWeb/frontend/src/app/particles/components/render-container/render-container.component.html

<div #rendererContainer class="renderer-container">
  <div class="plane-controls-overlay">
    <div class="button-row">
      <button mat-mini-fab color="primary" (click)="resetCamera()"
              matTooltip="Reset camera">
        <mat-icon>location_searching</mat-icon>
      </button>

      <button mat-mini-fab color="primary" (click)="togglePlaneLock()"
              [matTooltip]="isPlaneLocked ? 'Unlock Plane' : 'Lock Plane'">
        <mat-icon>{{ isPlaneLocked ? 'lock' : 'lock_open' }}</mat-icon>
      </button>
    </div>

    <div *ngIf="isPlaneLocked" class="plane-orientation-buttons">
      <button mat-mini-fab color="warn" (click)="setPlaneOrientation(planeOrientations.VERTICAL_ABOVE)"
              [class.active]="currentPlaneOrientation === planeOrientations.VERTICAL_ABOVE"
              matTooltip="Vertical Above">
        <mat-icon>arrow_upward</mat-icon>
      </button>
      <button mat-mini-fab color="warn" (click)="setPlaneOrientation(planeOrientations.VERTICAL_BELOW)"
              [class.active]="currentPlaneOrientation === planeOrientations.VERTICAL_BELOW"
              matTooltip="Vertical Below">
        <mat-icon>arrow_downward</mat-icon>
      </button>
      <button mat-mini-fab color="primary" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_FRONT)"
              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_FRONT"
              matTooltip="Horizontal Front">
        <mat-icon>arrow_forward</mat-icon>
      </button>
      <button mat-mini-fab color="primary" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_BEHIND)"
              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_BEHIND"
              matTooltip="Horizontal Behind">
        <mat-icon>arrow_back</mat-icon>
      </button>
      <button mat-mini-fab color="accent" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_RIGHT)"
              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_RIGHT"
              matTooltip="Horizontal Right">
        <mat-icon>arrow_right</mat-icon>
      </button>
      <button mat-mini-fab color="accent" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_LEFT)"
              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_LEFT"
              matTooltip="Horizontal Left">
        <mat-icon>arrow_left</mat-icon>
      </button>
    </div>
  </div>
</div>