81 lines
4.0 KiB
HTML
81 lines
4.0 KiB
HTML
<div #rendererContainer class="renderer-container">
|
|
<div class="plane-controls-overlay">
|
|
<div>
|
|
<mat-form-field appearance="outline" style="width: 10ch">
|
|
<mat-label>Opacity</mat-label>
|
|
<input matInput type="number" [(ngModel)]="opacity" min="0" max="1" step="0.01" placeholder="">
|
|
</mat-form-field>
|
|
<mat-form-field appearance="outline" style="width: 12ch; margin-left: 8px;">
|
|
<mat-label>Grid density</mat-label>
|
|
<input matInput type="number" [(ngModel)]="gridDensity" min="2" max="64" step="2" placeholder="">
|
|
</mat-form-field>
|
|
</div>
|
|
<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)="toggleShowParticlesWhenIntersectingPlane()"
|
|
[matTooltip]="onlyIntersecting ? 'Show all particles' : 'Show only intersecting particles'">
|
|
<mat-icon>{{ onlyIntersecting ? 'visibility_off' : 'visibility' }}</mat-icon>
|
|
</button>
|
|
|
|
<button mat-mini-fab color="primary" (click)="toggleShowCharacter()"
|
|
[matTooltip]="showCharacter ? 'Hide character' : 'Show character'">
|
|
<mat-icon>{{ showCharacter ? 'person' : 'person_off' }}</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>
|
|
|
|
<button mat-mini-fab color="primary" (click)="gridVisible = !gridVisible"
|
|
[matTooltip]="gridVisible ? 'Hide grid' : 'Show grid'">
|
|
<mat-icon>{{ gridVisible ? 'grid_off' : 'grid_on' }}</mat-icon>
|
|
</button>
|
|
|
|
<button mat-mini-fab color="primary" (click)="gridSnapEnabled = !gridSnapEnabled"
|
|
[matTooltip]="gridSnapEnabled ? 'Disable grid snap' : 'Enable grid snap'">
|
|
<mat-icon>{{ gridSnapEnabled ? 'push_pin' : 'pinch' }}</mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
@if (isPlaneLocked) {
|
|
<div 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>
|