components/display-shell/display-shell.component.ts

0001 import {
0002   Component,
0003   HostListener,
0004   ViewChild,
0005   ViewContainerRef,
0006   ComponentRef,
0007   Type, EventEmitter, Output,
0008 } from '@angular/core';
0009 import { CommonModule } from '@angular/common'; // Add this import
0010
0011 @Component({
0012   selector: 'app-display-shell',
0013   templateUrl: './display-shell.component.html',
0014   styleUrls: ['./display-shell.component.scss'],
0015   imports: [CommonModule],
0016   standalone: true,
0017 })
0018 export class DisplayShellComponent {
0019
0020   /** The reference to the left container, so it could be programmatically set */
0021   @ViewChild('leftPaneContainer', { read: ViewContainerRef, static: true })
0022   leftPaneContainer!: ViewContainerRef;
0023
0024   /** The reference to the right container, so it could be programmatically set */
0025   @ViewChild('rightPaneContainer', { read: ViewContainerRef, static: true })
0026   rightPaneContainer!: ViewContainerRef;
0027
0028   /** Event emitted when the resizing of the left pane ends. Emits the new width
0029    *
0030    * @event
0031    */
0032   @Output() onEndResizeLeft = new EventEmitter<number>();
0033
0034   /** Event emitted when the resizing of the right pane ends. Emits the new width
0035    *
0036    * @event
0037    */
0038   @Output() onEndResizeRight = new EventEmitter<number>();
0039
0040   /** Event emitted when the visibility of right panel is changed. Emits the new width
0041    *
0042    * @event
0043    */
0044   @Output() onVisibilityChangeRight = new EventEmitter<boolean>();
0045
0046   /** Event emitted when the visibility of left panel is changed. Emits the new width
0047    *
0048    * @event
0049    */
0050   @Output() onVisibilityChangeLeft = new EventEmitter<boolean>();
0051
0052
0053   /** Indicates whether the left pane is currently being resized. */
0054   private isResizingLeft: boolean = false;
0055
0056   /** Indicates whether the right pane is currently being resized. */
0057   private isResizingRight: boolean = false;
0058
0059   /** The current width of a left plane */
0060   leftPaneWidth = 250;
0061
0062   /** The current width of a right plane */
0063   rightPaneWidth = 250;
0064
0065   /** If left plane is visible or collapsed */
0066   isLeftPaneVisible = false;
0067
0068   /** If right plane is visible or collapsed */
0069   isRightPaneVisible = false;
0070
0071
0072
0073   onMouseDownLeft(event: MouseEvent) {
0074     this.isResizingLeft = true;
0075     event.preventDefault();
0076   }
0077
0078   onMouseDownRight(event: MouseEvent) {
0079     this.isResizingRight = true;
0080     event.preventDefault();
0081   }
0082
0083   @HostListener('document:mousemove', ['$event'])
0084   onMouseMove(event: MouseEvent) {
0085     if (this.isResizingLeft) {
0086       const minWidth = 100;
0087       const maxWidth = window.innerWidth - this.rightPaneWidth - 100;
0088       let newWidth = event.clientX;
0089       this.leftPaneWidth = Math.max(minWidth, Math.min(newWidth, maxWidth));
0090       event.preventDefault();
0091     } else if (this.isResizingRight) {
0092       const minWidth = 100;
0093       const maxWidth = window.innerWidth - this.leftPaneWidth - 100;
0094       let newWidth = window.innerWidth - event.clientX;
0095       this.rightPaneWidth = Math.max(minWidth, Math.min(newWidth, maxWidth));
0096       event.preventDefault();
0097     }
0098   }
0099
0100   @HostListener('document:mouseup')
0101   onMouseUp() {
0102     if(this.isResizingLeft) {
0103       this.isResizingLeft = false;
0104       this.onEndResizeLeft.emit(this.leftPaneWidth);
0105     }
0106
0107     if(this.isResizingRight) {
0108       this.isResizingRight = false;
0109       this.onEndResizeRight.emit(this.rightPaneWidth);
0110     }
0111   }
0112
0113   // Method to add a component to left pane programmatically
0114   addComponentToLeftPane<T>(component: Type<T>, data?: Partial<T>): ComponentRef<T> {
0115     this.leftPaneContainer.clear();
0116     const componentRef = this.leftPaneContainer.createComponent(component);
0117     if (data) {
0118       Object.assign(componentRef.instance as object, data);
0119     }
0120     return componentRef;
0121   }
0122
0123   // Method to add a component to right pane programmatically
0124   addComponentToRightPane<T>(component: Type<T>, data?: Partial<T>): ComponentRef<T> {
0125     this.rightPaneContainer.clear();
0126     const componentRef = this.rightPaneContainer.createComponent(component);
0127     if (data) {
0128       Object.assign(componentRef.instance as object, data);
0129     }
0130     return componentRef;
0131   }
0132
0133   toggleLeftPane() {
0134     this.isLeftPaneVisible = !this.isLeftPaneVisible;
0135     this.onVisibilityChangeLeft.emit(this.isLeftPaneVisible);
0136   }
0137
0138   toggleRightPane() {
0139     this.isRightPaneVisible = !this.isRightPaneVisible;
0140     this.onVisibilityChangeRight.emit(this.isRightPaneVisible);
0141   }
0142 }