Geometry tree works as sidenav

eic · Sep 24, 2024 · 3efdcff · 3efdcff
1 parent 4369cb2
commit 3efdcff
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 15 deletions.
diff --git a/firebird-ng/src/app/geometry-tree/geometry-tree-window/geometry-tree-window.component.html b/firebird-ng/src/app/geometry-tree/geometry-tree-window/geometry-tree-window.component.html
@@ -1,13 +1,18 @@
 <button mat-icon-button (click)="toggleWindow()" class="tree-button">
-  <mat-icon>{{windowOpenState ? 'close' : 'account_tree'}}</mat-icon>
+  <mat-icon>{{ windowOpenState ? 'close' : 'account_tree' }}</mat-icon>
 </button>
 
-<div class="window" *ngIf="windowOpenState" #windowContainer>
+<div class="window" *ngIf="windowOpenState" #windowContainer [class.side-nav]="sideNavOpen">
   <div class="window-header" #windowHeader>
     <span>Geometry Tree</span>
+
+    <!-- Кнопка для активации сайд-навигации -->
+    <button mat-icon-button (click)="toggleSideNav()" class="side-nav-button">
+      <mat-icon>{{ sideNavOpen ? 'chevron_left' : 'chevron_right' }}</mat-icon>
+    </button>
   </div>
 
   <app-geometry-tree *ngIf="windowOpenState"></app-geometry-tree>
 
-  <div class="resize-handle" #resizeHandle></div>
+  <div class="resize-handle" *ngIf="!sideNavOpen" #resizeHandle></div>
 </div>
diff --git a/firebird-ng/src/app/geometry-tree/geometry-tree-window/geometry-tree-window.component.scss b/firebird-ng/src/app/geometry-tree/geometry-tree-window/geometry-tree-window.component.scss
@@ -51,9 +51,44 @@
 .resize-handle {
   width: 16px;
   height: 16px;
-  background-color: #ccc;
   position: absolute;
   bottom: 0;
   right: 0;
   cursor: se-resize;
 }
+
+.window {
+  position: absolute;
+  border: 1px solid #2e2e2e;
+  transition: width 0.3s ease;
+
+  &.side-nav {
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 250px;
+    max-width: 250px;
+  }
+
+  .window-header {
+
+    padding: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: move;
+  }
+
+  .side-nav-button {
+    margin-left: auto;
+  }
+
+  .resize-handle {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    cursor: nwse-resize;
+  }
+}
diff --git a/firebird-ng/src/app/geometry-tree/geometry-tree-window/geometry-tree-window.component.ts b/firebird-ng/src/app/geometry-tree/geometry-tree-window/geometry-tree-window.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
 import {MatIconButton} from "@angular/material/button";
 import {MatIcon} from "@angular/material/icon";
 import {GeometryTreeComponent} from "../geometry-tree.component";
@@ -16,8 +16,9 @@ import {NgIf} from "@angular/common";
   ],
   standalone: true
 })
-export class GeometryTreeWindowComponent implements AfterViewInit {
-  windowOpenState = true;
+export class GeometryTreeWindowComponent implements AfterViewInit, OnDestroy {
+  windowOpenState = false;
+  sideNavOpen = false;
 
   @ViewChild('windowContainer', { static: false }) windowContainer!: ElementRef;
   @ViewChild('windowHeader', { static: false }) windowHeader!: ElementRef;
@@ -28,13 +29,23 @@ export class GeometryTreeWindowComponent implements AfterViewInit {
   private lastX = 0;
   private lastY = 0;
 
+  private dragMouseMoveHandler: any;
+  private dragMouseUpHandler: any;
+  private resizeMouseMoveHandler: any;
+  private resizeMouseUpHandler: any;
+
   ngAfterViewInit() {
     if (this.windowOpenState) {
       this.initDrag();
       this.initResize();
     }
   }
 
+  ngOnDestroy() {
+    this.removeDragListeners();
+    this.removeResizeListeners();
+  }
+
   toggleWindow() {
     this.windowOpenState = !this.windowOpenState;
 
@@ -43,6 +54,9 @@ export class GeometryTreeWindowComponent implements AfterViewInit {
         this.initDrag();
         this.initResize();
       });
+    } else {
+      this.removeDragListeners();
+      this.removeResizeListeners();
     }
   }
 
@@ -60,7 +74,7 @@ export class GeometryTreeWindowComponent implements AfterViewInit {
       }
     });
 
-    document.addEventListener('mousemove', (e: MouseEvent) => {
+    this.dragMouseMoveHandler = (e: MouseEvent) => {
       if (this.isDragging) {
         const dx = e.clientX - this.lastX;
         const dy = e.clientY - this.lastY;
@@ -72,11 +86,14 @@ export class GeometryTreeWindowComponent implements AfterViewInit {
         this.lastX = e.clientX;
         this.lastY = e.clientY;
       }
-    });
+    };
 
-    document.addEventListener('mouseup', () => {
+    this.dragMouseUpHandler = () => {
       this.isDragging = false;
-    });
+    };
+
+    document.addEventListener('mousemove', this.dragMouseMoveHandler);
+    document.addEventListener('mouseup', this.dragMouseUpHandler);
   }
 
   initResize() {
@@ -92,7 +109,7 @@ export class GeometryTreeWindowComponent implements AfterViewInit {
       e.preventDefault();
     });
 
-    document.addEventListener('mousemove', (e: MouseEvent) => {
+    this.resizeMouseMoveHandler = (e: MouseEvent) => {
       if (this.isResizing) {
         const dx = e.clientX - this.lastX;
         const dy = e.clientY - this.lastY;
@@ -103,10 +120,39 @@ export class GeometryTreeWindowComponent implements AfterViewInit {
         this.lastX = e.clientX;
         this.lastY = e.clientY;
       }
-    });
+    };
 
-    document.addEventListener('mouseup', () => {
+    this.resizeMouseUpHandler = () => {
       this.isResizing = false;
-    });
+    };
+
+    document.addEventListener('mousemove', this.resizeMouseMoveHandler);
+    document.addEventListener('mouseup', this.resizeMouseUpHandler);
+  }
+
+  removeDragListeners() {
+    if (this.dragMouseMoveHandler && this.dragMouseUpHandler) {
+      document.removeEventListener('mousemove', this.dragMouseMoveHandler);
+      document.removeEventListener('mouseup', this.dragMouseUpHandler);
+    }
+  }
+
+  removeResizeListeners() {
+    if (this.resizeMouseMoveHandler && this.resizeMouseUpHandler) {
+      document.removeEventListener('mousemove', this.resizeMouseMoveHandler);
+      document.removeEventListener('mouseup', this.resizeMouseUpHandler);
+    }
   }
+
+  toggleSideNav() {
+    this.sideNavOpen = !this.sideNavOpen;
+
+    if (this.sideNavOpen) {
+      this.windowContainer.nativeElement.style.left = '0px';
+      this.windowContainer.nativeElement.style.width = '400px';
+    } else {
+      this.windowContainer.nativeElement.style.width = '';
+    }
+  }
+
 }