components/view-options/view-options.component.ts

0001 import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
0002 import {MatCheckbox, MatCheckboxChange} from '@angular/material/checkbox';
0003 import { MatDialog } from '@angular/material/dialog';
0004 import { CartesianGridConfigComponent } from './cartesian-grid-config/cartesian-grid-config.component';
0005 import { SceneHelpersService } from '../../services/scene-helpers.service';
0006 import { Vector3 } from 'three';
0007 import { Subscription } from 'rxjs';
0008 import {MatMenu, MatMenuItem, MatMenuTrigger} from '@angular/material/menu';
0009 import {MatIcon} from "@angular/material/icon";
0010 import {NgForOf, NgIf} from "@angular/common";
0011 import {MatTooltip} from "@angular/material/tooltip";
0012 import {MatIconButton} from "@angular/material/button";
0013
0014 @Component({
0015     selector: 'app-custom-view-options',
0016     templateUrl: './view-options.component.html',
0017     styleUrls: ['./view-options.component.scss'],
0018   imports: [
0019     MatMenu,
0020     MatCheckbox,
0021     MatIcon,
0022     MatMenuItem,
0023     MatMenuTrigger,
0024     NgForOf,
0025     NgIf,
0026     MatTooltip,
0027     MatIconButton,
0028     // the relevant Material modules, e.g. MatMenu, MatCheckbox, etc.
0029   ]
0030 })
0031 export class ViewOptionsComponent implements OnInit, OnDestroy {
0032   @ViewChild(MatMenuTrigger) trigger!: MatMenuTrigger;
0033
0034   // toggles
0035   showCartesianGrid = false;
0036   scale = 3000;
0037
0038   // If you had "views" for camera preset positions,
0039   // you can define them yourself. e.g.:
0040   views = [
0041     { name: 'Left View', icon: 'left-cube', target: new Vector3(0,0,0), cameraPos: new Vector3(0,0,1200) },
0042     { name: 'Center View', icon: 'top-cube', target: new Vector3(0,0,0), cameraPos: new Vector3(1200,0,0) },
0043     // etc...
0044   ];
0045
0046   constructor(
0047     private dialog: MatDialog,
0048     private sceneHelpers: SceneHelpersService
0049   ) {}
0050
0051   ngOnInit(): void {}
0052
0053   ngOnDestroy(): void {}
0054
0055   // Example "view" code
0056   displayView($event: MouseEvent, view: any) {
0057     $event.stopPropagation();
0058     // We set the camera:
0059     this.sceneHelpers.setCameraView(view.target, view.cameraPos);
0060   }
0061
0062   // Toggling axis
0063   setAxis(change: MatCheckboxChange) {
0064     this.sceneHelpers.setShowAxis(change.checked);
0065   }
0066
0067   // Toggling eta-phi
0068   setEtaPhiGrid(change: MatCheckboxChange) {
0069     this.sceneHelpers.setShowEtaPhiGrid(change.checked);
0070   }
0071
0072   // Toggling cartesian grid
0073   setCartesianGrid(change: MatCheckboxChange) {
0074     this.showCartesianGrid = change.checked;
0075     this.sceneHelpers.setShowCartesianGrid(this.showCartesianGrid, this.scale);
0076   }
0077
0078   // Toggling labels
0079   showLabels(change: MatCheckboxChange) {
0080     this.sceneHelpers.showLabels(change.checked);
0081   }
0082
0083   // Toggling 3D points
0084   show3DMousePoints(change: MatCheckboxChange) {
0085     this.sceneHelpers.show3DMousePoints(change.checked);
0086   }
0087
0088   // Toggling 3D distance
0089   toggleShowDistance(change: MatCheckboxChange) {
0090     this.trigger.closeMenu();
0091     this.sceneHelpers.show3DDistance(change.checked);
0092   }
0093
0094   // Opening the config dialog for cartesian grid
0095   openCartesianGridConfigDialog() {
0096     this.dialog.open(CartesianGridConfigComponent, {
0097       data: {
0098         gridVisible: this.showCartesianGrid,
0099         scale: this.scale,
0100       },
0101       position: {
0102         bottom: '5rem',
0103         left: '3rem',
0104       },
0105     });
0106   }
0107 }