Updating toolpanel

zoom is working, new buttons added
eic · Oct 17, 2024 · d61c75c · d61c75c
1 parent a171b92
commit d61c75c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 27 deletions.
diff --git a/firebird-ng/src/app/components/tool-panel/tool-panel.component.html b/firebird-ng/src/app/components/tool-panel/tool-panel.component.html
@@ -21,6 +21,8 @@
                 (touchcancel)="clearZoom()">
           <mat-icon>zoom_out</mat-icon>
         </button>
+        <app-view-options></app-view-options>
+        <app-main-view-toggle></app-main-view-toggle>
       </div>
     </div>
   </div>

diff --git a/firebird-ng/src/app/components/tool-panel/tool-panel.component.scss b/firebird-ng/src/app/components/tool-panel/tool-panel.component.scss
@@ -3,6 +3,7 @@
   top: 20%;
   right: 0;
   display: flex;
+  justify-content: center;
   align-items: center;
 }
 
@@ -15,6 +16,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   transition: transform 0.3s ease;
   padding: 10px;
 }
@@ -31,7 +33,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-
+  margin-left: 7px;
   border-radius: 50%;
   transition: background-color 0.3s ease;
 

diff --git a/firebird-ng/src/app/components/tool-panel/tool-panel.component.ts b/firebird-ng/src/app/components/tool-panel/tool-panel.component.ts
@@ -1,44 +1,47 @@
 import {Component, Input} from '@angular/core';
 import {NgIf} from "@angular/common";
 import {MatIcon} from "@angular/material/icon";
-import { EventDisplayService } from 'phoenix-ui-components';
+import {EventDisplayService, PhoenixUIModule} from 'phoenix-ui-components';
+import {PhoenixThreeFacade} from "../../utils/phoenix-three-facade";
 
 @Component({
   selector: 'app-tool-panel',
   standalone: true,
   imports: [
     NgIf,
-    MatIcon
+    MatIcon,
+    PhoenixUIModule
   ],
   templateUrl: './tool-panel.component.html',
   styleUrl: './tool-panel.component.scss'
 })
 export class ToolPanelComponent {
   isCollapsed = false;
 
+  private threeFacade: PhoenixThreeFacade;
   /** Factor to zoom by. */
   private zoomFactor: number = 1.1;
   /** Timeout for clearing mouse hold. */
   private zoomTimeout: any;
   /** The speed and time of zoom. */
   private zoomTime: number = 100;
 
-  constructor(private eventDisplay: EventDisplayService) {}
+  constructor(
+    private eventDisplay: EventDisplayService)
+  {
+    this.threeFacade = new PhoenixThreeFacade(this.eventDisplay);
+  }
 
   /**
    * Zoom all the cameras by a specific zoom factor.
    * The factor may either be greater (zoom in) or smaller (zoom out) than 1.
-   * @param zoomFactor The factor to zoom by.
+   * @param factor
    */
-  zoomTo(zoomFactor: number) {
-    this.zoomTime =
-      this.zoomTime > 30 ? Math.floor(this.zoomTime / 1.1) : this.zoomTime;
-
-    this.eventDisplay.zoomTo(zoomFactor, this.zoomTime);
-
-    this.zoomTimeout = setTimeout(() => {
-      this.zoomTo(zoomFactor);
-    }, this.zoomTime);
+  zoomTo(factor: number) {
+    let orbitControls = this.threeFacade.activeOrbitControls;
+    let camera = this.threeFacade.mainCamera;
+    orbitControls.object.position.subVectors(camera.position, orbitControls.target).multiplyScalar(factor).add(orbitControls.target);
+    orbitControls.update();
   }
 
   onLeftClick(event: MouseEvent, action: string) {

diff --git a/firebird-ng/src/app/pages/main-display/main-display.component.html b/firebird-ng/src/app/pages/main-display/main-display.component.html
@@ -169,7 +169,7 @@
 <!--      &lt;!&ndash; Zoom in and zoom out controls &ndash;&gt;-->
 <!--      <app-zoom-controls></app-zoom-controls>-->
 
-      <app-view-options></app-view-options>
+<!--      <app-view-options></app-view-options>-->
 
       <app-auto-rotate></app-auto-rotate>
 
@@ -179,26 +179,26 @@
       <!-- Toggle for clipping geometries -->
       <app-object-clipping></app-object-clipping>
 
-      <!-- Main view toggle -->
-      <app-main-view-toggle></app-main-view-toggle>
+<!--      &lt;!&ndash; Main view toggle &ndash;&gt;-->
+<!--      <app-main-view-toggle></app-main-view-toggle>-->
 
-      <!-- Toggle for overlay panel -->
-      <app-overlay-view></app-overlay-view>
+<!--      &lt;!&ndash; Toggle for overlay panel &ndash;&gt;-->
+<!--      <app-overlay-view></app-overlay-view>-->
 
       <!-- Toggle for selected object panel -->
       <app-object-selection></app-object-selection>
 
-      <!-- Toggle for animating the event data -->
-      <app-animate-event></app-animate-event>
+<!--      &lt;!&ndash; Toggle for animating the event data &ndash;&gt;-->
+<!--      <app-animate-event></app-animate-event>-->
 
-      <!-- Toggle for collections info -->
-      <app-collections-info></app-collections-info>
+<!--      &lt;!&ndash; Toggle for collections info &ndash;&gt;-->
+<!--      <app-collections-info></app-collections-info>-->
 
-      <!-- Toggle for geometry browser -->
-      <app-geometry-browser></app-geometry-browser>
+<!--      &lt;!&ndash; Toggle for geometry browser &ndash;&gt;-->
+<!--      <app-geometry-browser></app-geometry-browser>-->
 
-      <!-- Toggle for performance -->
-      <app-performance-toggle></app-performance-toggle>
+<!--      &lt;!&ndash; Toggle for performance &ndash;&gt;-->
+<!--      <app-performance-toggle></app-performance-toggle>-->
 
       <!-- Toggle for loading geometries modal-->
       <eic-io-options></eic-io-options>