geometry tree window works with bugs

firebird-ng/src/app/geometry-tree/geometry-tree-window/geometry-tree-window.component.html

@@ -0,0 +1,13 @@
+<button mat-icon-button (click)="toggleWindow()" class="tree-button">
+  <mat-icon>{{windowOpenState ? 'close' : 'account_tree'}}</mat-icon>
+</button>
+
+<div class="window" *ngIf="windowOpenState" #windowContainer>
+  <div class="window-header" #windowHeader>
+    <span>Geometry Tree</span>
+  </div>
+
+  <app-geometry-tree *ngIf="windowOpenState"></app-geometry-tree>
+
+  <div class="resize-handle" #resizeHandle></div>
+</div>

firebird-ng/src/app/geometry-tree/geometry-tree-window/geometry-tree-window.component.scss

@@ -0,0 +1,59 @@
+.tree-button {
+  background-color: #2e2e2e;
+  color: white;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.3s;
+  position: fixed;
+  top: 150px;
+  right: 20px;
+
+  &:hover {
+    background-color: #95A5A5;
+  }
+
+  mat-icon {
+    font-size: 24px;
+  }
+}
+
+
+.window {
+  position: absolute;
+  width: 400px;
+  height: 400px;
+  border: 1px solid #ccc;
+  background-color: #2e2e2e;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+  resize: both;
+  min-width: 200px;
+  min-height: 200px;
+  color: white;
+  overflow-y: auto;
+}
+
+.window-header {
+  background-color: #3e3e3e;
+  padding: 8px;
+  cursor: move;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.resize-handle {
+  width: 16px;
+  height: 16px;
+  background-color: #ccc;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+}

firebird-ng/src/app/geometry-tree/geometry-tree-window/geometry-tree-window.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeometryTreeWindowComponent } from './geometry-tree-window.component';
+
+describe('GeometryDialogComponent', () => {
+  let component: GeometryTreeWindowComponent;
+  let fixture: ComponentFixture<GeometryTreeWindowComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GeometryTreeWindowComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GeometryTreeWindowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

firebird-ng/src/app/geometry-tree/geometry-tree-window/geometry-tree-window.component.ts

@@ -0,0 +1,112 @@
+import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import {MatIconButton} from "@angular/material/button";
+import {MatIcon} from "@angular/material/icon";
+import {GeometryTreeComponent} from "../geometry-tree.component";
+import {NgIf} from "@angular/common";
+
+@Component({
+  selector: 'geometry-tree-window',
+  templateUrl: 'geometry-tree-window.component.html',
+  styleUrls: ['geometry-tree-window.component.scss'],
+  imports: [
+    MatIconButton,
+    MatIcon,
+    GeometryTreeComponent,
+    NgIf
+  ],
+  standalone: true
+})
+export class GeometryTreeWindowComponent implements AfterViewInit {
+  windowOpenState = true;
+
+  @ViewChild('windowContainer', { static: false }) windowContainer!: ElementRef;
+  @ViewChild('windowHeader', { static: false }) windowHeader!: ElementRef;
+  @ViewChild('resizeHandle', { static: false }) resizeHandle!: ElementRef;
+
+  private isDragging = false;
+  private isResizing = false;
+  private lastX = 0;
+  private lastY = 0;
+
+  ngAfterViewInit() {
+    if (this.windowOpenState) {
+      this.initDrag();
+      this.initResize();
+    }
+  }
+
+  toggleWindow() {
+    this.windowOpenState = !this.windowOpenState;
+
+    if (this.windowOpenState) {
+      setTimeout(() => {
+        this.initDrag();
+        this.initResize();
+      });
+    }
+  }
+
+  initDrag() {
+    if (!this.windowContainer) return;
+
+    const windowElement = this.windowContainer.nativeElement;
+
+    windowElement.addEventListener('mousedown', (e: MouseEvent) => {
+      if ((<HTMLElement>e.target).classList.contains('window-header')) {
+        this.isDragging = true;
+        this.lastX = e.clientX;
+        this.lastY = e.clientY;
+        e.preventDefault();
+      }
+    });
+
+    document.addEventListener('mousemove', (e: MouseEvent) => {
+      if (this.isDragging) {
+        const dx = e.clientX - this.lastX;
+        const dy = e.clientY - this.lastY;
+
+        const rect = windowElement.getBoundingClientRect();
+        windowElement.style.left = rect.left + dx + 'px';
+        windowElement.style.top = rect.top + dy + 'px';
+
+        this.lastX = e.clientX;
+        this.lastY = e.clientY;
+      }
+    });
+
+    document.addEventListener('mouseup', () => {
+      this.isDragging = false;
+    });
+  }
+
+  initResize() {
+    if (!this.resizeHandle || !this.windowContainer) return;
+
+    const resizeHandle = this.resizeHandle.nativeElement;
+    const windowElement = this.windowContainer.nativeElement;
+
+    resizeHandle.addEventListener('mousedown', (e: MouseEvent) => {
+      this.isResizing = true;
+      this.lastX = e.clientX;
+      this.lastY = e.clientY;
+      e.preventDefault();
+    });
+
+    document.addEventListener('mousemove', (e: MouseEvent) => {
+      if (this.isResizing) {
+        const dx = e.clientX - this.lastX;
+        const dy = e.clientY - this.lastY;
+
+        windowElement.style.width = windowElement.offsetWidth + dx + 'px';
+        windowElement.style.height = windowElement.offsetHeight + dy + 'px';
+
+        this.lastX = e.clientX;
+        this.lastY = e.clientY;
+      }
+    });
+
+    document.addEventListener('mouseup', () => {
+      this.isResizing = false;
+    });
+  }
+}

firebird-ng/src/app/geometry-tree/geometry-tree.component.html

@@ -6,7 +6,9 @@
     <!-- use a disabled button to provide padding for tree leaf -->
     <button mat-icon-button disabled></button>
     {{node.name}}
-    [{{node.type}}]
+    <button mat-icon-button (click)="toggleVisibility(node)">
+      <mat-icon>{{ node.visible ? 'visibility' : 'visibility_off' }}</mat-icon>
+    </button>
   </mat-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
@@ -17,6 +19,8 @@
       </mat-icon>
     </button>
     {{node.name}}
-    [{{node.type}}]
+    <button mat-icon-button (click)="toggleVisibility(node)">
+      <mat-icon>{{ node.visible ? 'visibility' : 'visibility_off' }}</mat-icon>
+    </button>
   </mat-tree-node>
 </mat-tree>

firebird-ng/src/app/geometry-tree/geometry-tree.component.ts

@@ -50,6 +50,8 @@ interface ExampleFlatNode {
   name: string;
   level: number;
   type: string;
+  object3D: Object3D;
+  visible: boolean;
 }
 
 @Component({
@@ -76,7 +78,9 @@ export class GeometryTreeComponent implements OnInit{
       expandable: !!node.children && node.children.length > 0,
       name: node.name,
       level: level,
-      type: node.type
+      type: node.type,
+      object3D: node,
+      visible: node.visible
     };
   };
 
@@ -115,5 +119,8 @@ export class GeometryTreeComponent implements OnInit{
       });
     }
 
-
+  toggleVisibility(node: ExampleFlatNode) {
+    this.geomService.toggleVisibility(node.object3D);
+    node.visible = !node.visible;
+  }
 }

firebird-ng/src/app/geometry.service.ts

@@ -192,5 +192,12 @@ export class GeometryService {
   private stripIdFromName(name: string) {
       return name.replace(/_\d+$/, '');
   }
+
+  toggleVisibility(object: Object3D) {
+    if (object) {
+      object.visible = !object.visible; 
+      console.log(`Visibility toggled for object: ${object.name}. Now visible: ${object.visible}`);
+    }
+  }
 }
 

firebird-ng/src/app/main-display/main-display.component.html

@@ -62,6 +62,8 @@
 
   <!-- Extra options -->
   <ng-content></ng-content>
+
+
 </app-ui-menu-wrapper>
 
 <div class="time-controls" style="background-color: #424242; padding: 2px; display: flex; gap: 3px; align-items: center; position: absolute; top:0px; left: 300px;">
@@ -115,6 +117,9 @@
   </button>
 
   <div style="color: darkgray">{{currentGeometry}}</div>
+
+
 </div>
 
 <div id="eventDisplay"></div>
+

firebird-ng/src/app/main-display/main-display.component.ts

@@ -42,6 +42,8 @@ import {MatTooltip} from "@angular/material/tooltip";
 import {MatSnackBar} from "@angular/material/snack-bar"
 import {MatFormField} from "@angular/material/form-field";
 import {MatOption, MatSelect} from "@angular/material/select";
+import {GeometryTreeWindowComponent} from "../geometry-tree/geometry-tree-window/geometry-tree-window.component";
+
 
 // import { LineMaterial } from 'three/addons/lines/LineMaterial.js';