Warning, /firebird/firebird-ng/src/app/components/geometry-tree-window/geometry-tree-window.component.ts is written in an unsupported language. File is not indexed.
0001 import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy, Renderer2 } from '@angular/core';
0002 import { MatIconButton } from "@angular/material/button";
0003 import { MatIcon } from "@angular/material/icon";
0004 import { SceneTreeComponent } from "../../pages/geometry-tree/scene-tree.component";
0005 import { NgIf } from "@angular/common";
0006
0007 @Component({
0008 selector: 'geometry-tree-window',
0009 templateUrl: 'geometry-tree-window.component.html',
0010 styleUrls: ['geometry-tree-window.component.scss'],
0011 imports: [
0012 MatIconButton,
0013 MatIcon,
0014 SceneTreeComponent,
0015 NgIf
0016 ],
0017 standalone: true
0018 })
0019 export class GeometryTreeWindowComponent implements AfterViewInit, OnDestroy {
0020 // windowOpenState = false;
0021 sideNavOpen = true;
0022 isDetached = false;
0023
0024 @ViewChild('windowContainer', { static: false }) windowContainer!: ElementRef;
0025 @ViewChild('windowHeader', { static: false }) windowHeader!: ElementRef;
0026 @ViewChild('resizeHandle', { static: false }) resizeHandle!: ElementRef;
0027
0028 private isDragging = false;
0029 private isResizing = false;
0030 private lastX = 0;
0031 private lastY = 0;
0032
0033 private dragMouseMoveHandler: any;
0034 private dragMouseUpHandler: any;
0035 private resizeMouseMoveHandler: any;
0036 private resizeMouseUpHandler: any;
0037
0038 constructor(private renderer: Renderer2) {}
0039
0040 ngAfterViewInit() {
0041 // if (this.windowOpenState) {
0042 // this.initDrag();
0043 // this.initResize();
0044 //
0045 // }
0046 }
0047
0048 ngOnDestroy() {
0049 this.removeDragListeners();
0050 this.removeResizeListeners();
0051 }
0052
0053 toggleWindow() {
0054 // this.windowOpenState = !this.windowOpenState;
0055 // if (this.windowOpenState) {
0056 // setTimeout(() => {
0057 // this.initDrag();
0058 // this.initResize();
0059 //
0060 // });
0061 // } else {
0062 // this.removeDragListeners();
0063 // this.removeResizeListeners();
0064 //
0065 // }
0066 }
0067
0068 // toggleSideNav() {
0069 // this.isDetached = !this.isDetached;
0070 //
0071 // if (!this.isDetached) {
0072 //
0073 // this.sideNavOpen = true;
0074 // this.renderer.setStyle(this.windowContainer.nativeElement, 'left', '0px');
0075 // this.renderer.setStyle(this.windowContainer.nativeElement, 'top', '60px');
0076 // this.renderer.setStyle(this.windowContainer.nativeElement, 'position', 'fixed');
0077 // this.renderer.setStyle(this.windowContainer.nativeElement, 'width', '300px');
0078 // this.renderer.setStyle(this.windowContainer.nativeElement, 'height', '100vh');
0079 // this.removeDragListeners();
0080 // } else {
0081 //
0082 // this.sideNavOpen = false;
0083 // this.renderer.setStyle(this.windowContainer.nativeElement, 'position', 'absolute');
0084 // this.renderer.setStyle(this.windowContainer.nativeElement, 'width', '400px');
0085 // this.renderer.setStyle(this.windowContainer.nativeElement, 'height', '400px');
0086 // this.initDrag();
0087 // }
0088 // this.updateMainContentShift();
0089 // }
0090
0091
0092
0093
0094
0095 initDrag() {
0096 if (!this.windowContainer || !this.isDetached) return;
0097
0098 const windowElement = this.windowContainer.nativeElement;
0099
0100 windowElement.addEventListener('mousedown', (e: MouseEvent) => {
0101 if ((<HTMLElement>e.target).classList.contains('window-header')) {
0102 this.isDragging = true;
0103 this.lastX = e.clientX;
0104 this.lastY = e.clientY;
0105 e.preventDefault();
0106 }
0107 });
0108
0109 this.dragMouseMoveHandler = (e: MouseEvent) => {
0110 if (this.isDragging) {
0111 const dx = e.clientX - this.lastX;
0112 const dy = e.clientY - this.lastY;
0113
0114 const rect = windowElement.getBoundingClientRect();
0115 windowElement.style.left = rect.left + dx + 'px';
0116 windowElement.style.top = rect.top + dy + 'px';
0117
0118 this.lastX = e.clientX;
0119 this.lastY = e.clientY;
0120 }
0121 };
0122
0123 this.dragMouseUpHandler = () => {
0124 this.isDragging = false;
0125 };
0126
0127 document.addEventListener('mousemove', this.dragMouseMoveHandler);
0128 document.addEventListener('mouseup', this.dragMouseUpHandler);
0129 }
0130
0131 initResize() {
0132 if (!this.resizeHandle || !this.windowContainer || !this.isDetached) return;
0133
0134 const resizeHandle = this.resizeHandle.nativeElement;
0135 const windowElement = this.windowContainer.nativeElement;
0136
0137 resizeHandle.addEventListener('mousedown', (e: MouseEvent) => {
0138 this.isResizing = true;
0139 this.lastX = e.clientX;
0140 this.lastY = e.clientY;
0141 e.preventDefault();
0142 });
0143
0144 this.resizeMouseMoveHandler = (e: MouseEvent) => {
0145 if (this.isResizing) {
0146 const dx = e.clientX - this.lastX;
0147 const dy = e.clientY - this.lastY;
0148
0149
0150 if (this.sideNavOpen) {
0151 windowElement.style.width = windowElement.offsetWidth + dx + 'px';
0152 } else {
0153 windowElement.style.width = windowElement.offsetWidth + dx + 'px';
0154 windowElement.style.height = windowElement.offsetHeight + dy + 'px';
0155 }
0156 this.lastX = e.clientX;
0157 this.lastY = e.clientY;
0158 }
0159 };
0160
0161 this.resizeMouseUpHandler = () => {
0162 this.isResizing = false;
0163 };
0164
0165 document.addEventListener('mousemove', this.resizeMouseMoveHandler);
0166 document.addEventListener('mouseup', this.resizeMouseUpHandler);
0167 }
0168
0169 removeDragListeners() {
0170 if (this.dragMouseMoveHandler && this.dragMouseUpHandler) {
0171 document.removeEventListener('mousemove', this.dragMouseMoveHandler);
0172 document.removeEventListener('mouseup', this.dragMouseUpHandler);
0173 }
0174 }
0175
0176 removeResizeListeners() {
0177 if (this.resizeMouseMoveHandler && this.resizeMouseUpHandler) {
0178 document.removeEventListener('mousemove', this.resizeMouseMoveHandler);
0179 document.removeEventListener('mouseup', this.resizeMouseUpHandler);
0180 }
0181 }
0182 }
