diff --git a/firebird-ng/src/app/app.component.html b/firebird-ng/src/app/app.component.html index 7e4a848..f54f8ac 100644 --- a/firebird-ng/src/app/app.component.html +++ b/firebird-ng/src/app/app.component.html @@ -51,55 +51,6 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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 new file mode 100644 index 0000000..0f84d33 --- /dev/null +++ b/firebird-ng/src/app/components/tool-panel/tool-panel.component.html @@ -0,0 +1,27 @@ +
+
+
+ +
+ + +
+
+
+
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 new file mode 100644 index 0000000..5b49f22 --- /dev/null +++ b/firebird-ng/src/app/components/tool-panel/tool-panel.component.scss @@ -0,0 +1,50 @@ +.tool-panel-wrapper { + position: fixed; + top: 20%; + right: 0; + display: flex; + align-items: center; +} + +.tool-panel { + width: 60px; + height: auto; + background-color: #2e2e2e; + box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); + border-radius: 8px 0 0 8px; + display: flex; + flex-direction: column; + align-items: center; + transition: transform 0.3s ease; + padding: 10px; +} + +.tool-panel.collapsed { + transform: translateX(calc(100% - 60px)); +} + +.icon-button { + background: none; + border: none; + cursor: pointer; + padding: 10px; + display: flex; + justify-content: center; + align-items: center; + + border-radius: 50%; + transition: background-color 0.3s ease; + + &:hover { + background-color: #5c5c5c; + } + + mat-icon { + font-size: 24px; + color: white; + } +} + +.toggle-button { + z-index: 1; +} diff --git a/firebird-ng/src/app/components/tool-panel/tool-panel.component.spec.ts b/firebird-ng/src/app/components/tool-panel/tool-panel.component.spec.ts new file mode 100644 index 0000000..f8b35ca --- /dev/null +++ b/firebird-ng/src/app/components/tool-panel/tool-panel.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ToolPanelComponent } from './tool-panel.component'; + +describe('ToolPanelComponent', () => { + let component: ToolPanelComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ToolPanelComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ToolPanelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 0000000..5cf4f8e --- /dev/null +++ b/firebird-ng/src/app/components/tool-panel/tool-panel.component.ts @@ -0,0 +1,72 @@ +import {Component, Input} from '@angular/core'; +import {NgIf} from "@angular/common"; +import {MatIcon} from "@angular/material/icon"; +import { EventDisplayService } from 'phoenix-ui-components'; + +@Component({ + selector: 'app-tool-panel', + standalone: true, + imports: [ + NgIf, + MatIcon + ], + templateUrl: './tool-panel.component.html', + styleUrl: './tool-panel.component.scss' +}) +export class ToolPanelComponent { + isCollapsed = false; + + /** 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) {} + + /** + * 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. + */ + 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); + } + + onLeftClick(event: MouseEvent, action: string) { + if (event.button === 0) { + if (action === 'zoomIn') { + this.zoomIn(); + } else if (action === 'zoomOut') { + this.zoomOut(); + } + } + } + + zoomIn() { + this.zoomTo(1 / this.zoomFactor); + } + zoomOut() { + this.zoomTo(this.zoomFactor); + } + + clearZoom() { + this.zoomTime = 100; + clearTimeout(this.zoomTimeout); + } + + togglePanel() { + this.isCollapsed = !this.isCollapsed; + } + + + +} 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 index 2ae68f7..8d5144f 100644 --- a/firebird-ng/src/app/pages/main-display/main-display.component.html +++ b/firebird-ng/src/app/pages/main-display/main-display.component.html @@ -166,8 +166,8 @@ - - + + @@ -227,7 +227,7 @@
- +
@@ -279,4 +279,5 @@
+ diff --git a/firebird-ng/src/app/pages/main-display/main-display.component.ts b/firebird-ng/src/app/pages/main-display/main-display.component.ts index c404794..468f183 100644 --- a/firebird-ng/src/app/pages/main-display/main-display.component.ts +++ b/firebird-ng/src/app/pages/main-display/main-display.component.ts @@ -47,6 +47,7 @@ import {SceneTreeComponent} from "../geometry-tree/scene-tree.component"; import {DisplayShellComponent} from "../../components/display-shell/display-shell.component"; import {DataModelPainter} from "../../painters/data-model-painter"; import {AppComponent} from "../../app.component"; +import {ToolPanelComponent} from "../../components/tool-panel/tool-panel.component"; // import { LineMaterial } from 'three/addons/lines/LineMaterial.js'; @@ -55,7 +56,7 @@ import {AppComponent} from "../../app.component"; @Component({ selector: 'app-test-experiment', templateUrl: './main-display.component.html', - imports: [PhoenixUIModule, IoOptionsComponent, MatSlider, MatIcon, MatButton, MatSliderThumb, DecimalPipe, MatTooltip, MatFormField, MatSelect, MatOption, NgForOf, AngularSplitModule, SceneTreeComponent, NgClass, MatIconButton, DisplayShellComponent, AppComponent, RouterOutlet, RouterLink], + imports: [PhoenixUIModule, IoOptionsComponent, MatSlider, MatIcon, MatButton, MatSliderThumb, DecimalPipe, MatTooltip, MatFormField, MatSelect, MatOption, NgForOf, AngularSplitModule, SceneTreeComponent, NgClass, MatIconButton, DisplayShellComponent, AppComponent, RouterOutlet, RouterLink, ToolPanelComponent], standalone: true, styleUrls: ['./main-display.component.scss'] })