components/tool-panel/tool-panel.component.ts

0001 import {Component, Input} from '@angular/core';
0002 import {NgIf} from "@angular/common";
0003 import {MatIcon} from "@angular/material/icon";
0004 import {EventDisplayService, PhoenixUIModule} from 'phoenix-ui-components';
0005 import {PhoenixThreeFacade} from "../../utils/phoenix-three-facade";
0006 import {ViewOptionsComponent} from "../view-options/view-options.component";
0007
0008 @Component({
0009   selector: 'app-tool-panel',
0010   standalone: true,
0011   imports: [
0012     NgIf,
0013     MatIcon,
0014     PhoenixUIModule,
0015     ViewOptionsComponent
0016   ],
0017   templateUrl: './tool-panel.component.html',
0018   styleUrl: './tool-panel.component.scss'
0019 })
0020 export class ToolPanelComponent {
0021   isCollapsed = false;
0022
0023   private threeFacade: PhoenixThreeFacade;
0024   /** Factor to zoom by. */
0025   private zoomFactor: number = 1.1;
0026   /** Timeout for clearing mouse hold. */
0027   private zoomTimeout: any;
0028   /** The speed and time of zoom. */
0029   private zoomTime: number = 100;
0030   private orthographicView: boolean = false;
0031
0032   constructor(
0033     private eventDisplay: EventDisplayService)
0034   {
0035     this.threeFacade = new PhoenixThreeFacade(this.eventDisplay);
0036   }
0037
0038   /**
0039    * Zoom all the cameras by a specific zoom factor.
0040    * The factor may either be greater (zoom in) or smaller (zoom out) than 1.
0041    * @param factor
0042    */
0043   zoomTo(factor: number) {
0044     let orbitControls = this.threeFacade.activeOrbitControls;
0045     let camera = this.threeFacade.mainCamera;
0046     orbitControls.object.position.subVectors(camera.position, orbitControls.target).multiplyScalar(factor).add(orbitControls.target);
0047     orbitControls.update();
0048   }
0049
0050   onLeftClick(event: MouseEvent, action: string) {
0051     if (event.button === 0) {
0052       if (action === 'zoomIn') {
0053         this.zoomIn();
0054       } else if (action === 'zoomOut') {
0055         this.zoomOut();
0056       }
0057     }
0058   }
0059
0060   zoomIn() {
0061     this.zoomTo(1 / this.zoomFactor);
0062   }
0063   zoomOut() {
0064     this.zoomTo(this.zoomFactor);
0065   }
0066
0067   clearZoom() {
0068     this.zoomTime = 100;
0069     clearTimeout(this.zoomTimeout);
0070   }
0071
0072   togglePanel() {
0073     this.isCollapsed = !this.isCollapsed;
0074   }
0075
0076   switchMainView() {
0077     this.orthographicView = !this.orthographicView;
0078     this.eventDisplay
0079       .getUIManager()
0080       .toggleOrthographicView(this.orthographicView);
0081   }
0082
0083
0084
0085 }