Skip to content

Commit

Permalink
Window resizing is working
Browse files Browse the repository at this point in the history
  • Loading branch information
@sqrd-max
sqrd-max committed Oct 3, 2024
1 parent 255b28b commit 195cfee
Show file tree
Hide file tree
Showing 7 changed files with 238 additions and 83 deletions.
4 changes: 2 additions & 2 deletions ...ird-ng/src/app/pages/geometry-tree/geometry-tree-window/geometry-tree-window.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { NgIf } from "@angular/common";
export class GeometryTreeWindowComponent implements AfterViewInit, OnDestroy {
windowOpenState = false;
sideNavOpen = true;
isDetached = true;
isDetached = false;

@ViewChild('windowContainer', { static: false }) windowContainer!: ElementRef;
@ViewChild('windowHeader', { static: false }) windowHeader!: ElementRef;
Expand Down Expand Up @@ -138,7 +138,7 @@ export class GeometryTreeWindowComponent implements AfterViewInit, OnDestroy {
}

initResize() {
if (!this.resizeHandle || !this.windowContainer) return;
if (!this.resizeHandle || !this.windowContainer || !this.isDetached) return;

const resizeHandle = this.resizeHandle.nativeElement;
const windowElement = this.windowContainer.nativeElement;
Expand Down
99 changes: 52 additions & 47 deletions firebird-ng/src/app/pages/main-display/main-display.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,15 @@
<!-- <button (click)="animateTime()"> play </button>-->
<!-- <button (click)="stopAnimation()">stop</button>-->
<!--</div>-->
<div class="container">
<div class="wrapper">

<geometry-tree-window class="navbar" ></geometry-tree-window>
<div class="box navbar">
<geometry-tree-window></geometry-tree-window>
</div>

<div class="handler"></div>

<div class="main">
<div class="box main">
<app-loader [loaded]="loaded" [progress]="loadingProgress"></app-loader>
<!--<app-nav></app-nav>-->
<!-- UI menu at the bottom -->
Expand Down Expand Up @@ -71,66 +75,67 @@

</app-ui-menu-wrapper>

<div id="eventDisplay" class="main-content"></div>
</div>

<div id="eventDisplay"></div>

<div class="time-controls">
<div class="time-controls">



<!-- <mat-select [(value)]="selectedEventKey" (selectionChange)="onUserSelectedEvent()">-->
<!-- <mat-option *ngFor="let key of eventsByName.keys()" [value]="key">-->
<!-- {{ key }}-->
<!-- </mat-option>-->
<!-- </mat-select>-->
<!-- <mat-select [(value)]="selectedEventKey" (selectionChange)="onUserSelectedEvent()">-->
<!-- <mat-option *ngFor="let key of eventsByName.keys()" [value]="key">-->
<!-- {{ key }}-->
<!-- </mat-option>-->
<!-- </mat-select>-->


<div>{{currentTime | number:'1.1-1'}}</div>
<mat-slider min="0" [max]="maxTime" step="1" showTickMarks discrete [displayWith]="formatCurrentTime" (input)="changeCurrentTime($event)">
<input matSliderThumb [value]="currentTime">
</mat-slider>
<div>{{maxTime | number:'1.0-0'}} [ns] &nbsp;&nbsp;</div>
<div>{{currentTime | number:'1.1-1'}}</div>
<mat-slider min="0" [max]="maxTime" step="1" showTickMarks discrete [displayWith]="formatCurrentTime" (input)="changeCurrentTime($event)">
<input matSliderThumb [value]="currentTime">
</mat-slider>
<div>{{maxTime | number:'1.0-0'}} [ns] &nbsp;&nbsp;</div>

<button mat-raised-button aria-label="Rewind" matTooltip="Rewind time to 0" class="tcontrol" (click)="rewindTime()">
<mat-icon>first_page</mat-icon>
</button>
<button mat-raised-button aria-label="Stop" matTooltip="Animate with beam particles collision" class="tcontrol" (click)="animateWithCollision()">
<mat-icon>close_fullscreen</mat-icon>
</button>
<button mat-raised-button aria-label="Play" matTooltip="Play time forward" class="tcontrol" (click)="animateTime()">
<mat-icon>play_arrow</mat-icon>
</button>
<button mat-raised-button aria-label="Step" matTooltip="Step 1ns backward" (click)="timeStepBack($event)" class="tcontrol">
<mat-icon>chevron_left</mat-icon>
</button>
<button mat-raised-button aria-label="Rewind" matTooltip="Rewind time to 0" class="tcontrol" (click)="rewindTime()">
<mat-icon>first_page</mat-icon>
</button>
<button mat-raised-button aria-label="Stop" matTooltip="Animate with beam particles collision" class="tcontrol" (click)="animateWithCollision()">
<mat-icon>close_fullscreen</mat-icon>
</button>
<button mat-raised-button aria-label="Play" matTooltip="Play time forward" class="tcontrol" (click)="animateTime()">
<mat-icon>play_arrow</mat-icon>
</button>
<button mat-raised-button aria-label="Step" matTooltip="Step 1ns backward" (click)="timeStepBack($event)" class="tcontrol">
<mat-icon>chevron_left</mat-icon>
</button>

<button mat-raised-button aria-label="Step" matTooltip="Step 1ns forward" (click)="timeStep($event)" class="tcontrol">
<mat-icon>chevron_right</mat-icon>
</button>
<button mat-raised-button aria-label="Pause" matTooltip="Pause time playing" class="tcontrol" (click)="stopAnimation()" >
<mat-icon>pause</mat-icon>
</button>
<button mat-raised-button aria-label="Stop" matTooltip="Stop and show all particles" class="tcontrol" (click)="exitTimedDisplay()" >
<mat-icon>stop</mat-icon>
</button>
<div>{{message}}</div>
&nbsp;&nbsp;
<button mat-raised-button aria-label="Step" matTooltip="Step 1ns forward" (click)="timeStep($event)" class="tcontrol">
<mat-icon>chevron_right</mat-icon>
</button>
<button mat-raised-button aria-label="Pause" matTooltip="Pause time playing" class="tcontrol" (click)="stopAnimation()" >
<mat-icon>pause</mat-icon>
</button>
<button mat-raised-button aria-label="Stop" matTooltip="Stop and show all particles" class="tcontrol" (click)="exitTimedDisplay()" >
<mat-icon>stop</mat-icon>
</button>
<div>{{message}}</div>
&nbsp;&nbsp;

<button mat-raised-button aria-label="Rewind" matTooltip="Play random NEXT EVENT" class="tcontrol" (click)="nextRandomEvent()">
<mat-icon>last_page</mat-icon>
</button>
<button mat-raised-button aria-label="Rewind" matTooltip="Play random NEXT EVENT" class="tcontrol" (click)="nextRandomEvent()">
<mat-icon>last_page</mat-icon>
</button>

<button mat-raised-button aria-label="Stop" matTooltip="Cycle through DETECTOR subsystems" class="tcontrol" (click)="cycleGeometry()" >
<mat-icon>view_in_ar</mat-icon>
</button>
<button mat-raised-button aria-label="Stop" matTooltip="Cycle through DETECTOR subsystems" class="tcontrol" (click)="cycleGeometry()" >
<mat-icon>view_in_ar</mat-icon>
</button>

<div style="color: darkgray">{{currentGeometry}}</div>
<div style="color: darkgray">{{currentGeometry}}</div>


</div>
</div>






</div>
94 changes: 63 additions & 31 deletions firebird-ng/src/app/pages/main-display/main-display.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,62 +5,94 @@
padding-left: 13px;
padding-right: 0;
}

//
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
//
//html, body {
// height: 100%;
//}

.container {
.wrapper {
display: flex;
flex-direction: column;

//flex-direction: column;
width: 100%;
height: 100vh;
}

.navbar {
.sidebar {
background-color: #2e2e2e;
width: 250px;
height: 100vh;
position: fixed;
top: 60px;
//width: 250px;
//height: 100vh;
//position: fixed;
//top: 60px;
left: 0;
display: flex;
flex-direction: column;
border-right: 2px solid black;
z-index: 10;
}

.main {
width: 100%;
display: flex;
flex: 1;
margin-left: 250px;
background-color: white;
}
//border-right: 2px solid black;
//z-index: 10;

.main-content {
flex: 1;
overflow: auto;
}

////
////.main {
//// //width: 100%;
//// //margin-left: 250px;
//// flex: 1 1 auto;
////}
//
////.main-content {
//// flex: 1;
////}
//
.time-controls {
display: flex;
background-color: #424242;
padding: 2px;
display: flex;
gap: 3px;
align-items: center;
justify-content: center;
height: 50px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;

}
//
//.handler {
// width: 20px;
// padding: 0;
// cursor: ew-resize;
// flex: 0 0 auto;
//}
//
//.handler::before {
// content: '';
// display: block;
// width: 4px;
// height: 100%;
// background: red;
// margin: 0 auto;
//}


.box {
/* Use box-sizing so that element's outerwidth will match width property */
box-sizing: border-box;

/* Allow box to grow and shrink, and ensure they are all equally sized */
flex: 1 1 auto;
}

.handler {
width: 20px;
padding: 0;
cursor: ew-resize;
flex: 0 0 auto;
}

.handler::before {
content: '';
display: block;
width: 4px;
height: 100%;
background: red;
margin: 0 auto;
}
39 changes: 38 additions & 1 deletion firebird-ng/src/app/pages/main-display/main-display.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Component, Input, OnInit} from '@angular/core';
import {Component, ElementRef, Input, OnInit, Renderer2} from '@angular/core';
import {HttpClient, HttpClientModule} from '@angular/common/http';


Expand Down Expand Up @@ -101,6 +101,8 @@ export class MainDisplayComponent implements OnInit {
selectedEventKey: string|undefined;
private beamAnimationTime: number = 1000;

private isHandlerDragging = false;


constructor(
private geomService: GeometryService,
Expand All @@ -109,11 +111,46 @@ export class MainDisplayComponent implements OnInit {
private route: ActivatedRoute,
private settings: UserConfigService,
private dataService: DataModelService,
private elRef: ElementRef, private renderer2: Renderer2,
private _snackBar: MatSnackBar) {
this.threeFacade = new PhoenixThreeFacade(this.eventDisplay);

}

ngAfterViewInit() {
const handler = this.elRef.nativeElement.querySelector('.handler');
const wrapper = handler.closest('.wrapper');
const boxA = wrapper.querySelector('.box');

this.renderer2.listen(handler, 'mousedown', (e: MouseEvent) => {

this.isHandlerDragging = true;
});

this.renderer2.listen(document, 'mousemove', (e: MouseEvent) => {
if (!this.isHandlerDragging) {
return;
}


const containerOffsetLeft = wrapper.offsetLeft;


const pointerRelativeXpos = e.clientX - containerOffsetLeft;


const boxAminWidth = 60;


boxA.style.width = `${Math.max(boxAminWidth, pointerRelativeXpos - 8)}px`;
boxA.style.flexGrow = '0';
});

this.renderer2.listen(document, 'mouseup', () => {
this.isHandlerDragging = false;
});
}

logRendererInfo() {
let renderer = this.threeFacade.mainRenderer;
console.log('Draw calls:', renderer.info.render.calls);
Expand Down
5 changes: 5 additions & 0 deletions firebird-ng/src/app/pages/split-window/split-window.component.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1,6 @@
<p>split-window works!</p>
<div class="wrapper">
<div class="box">A</div>
<div class="handler"></div>
<div class="box">B</div>
</div>
40 changes: 40 additions & 0 deletions firebird-ng/src/app/pages/split-window/split-window.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
body {
margin: 40px;
}

.wrapper {
background-color: #fff;
color: #444;
/* Use flexbox */
display: flex;
}

.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;

/* Use box-sizing so that element's outerwidth will match width property */
box-sizing: border-box;

/* Allow box to grow and shrink, and ensure they are all equally sized */
flex: 1 1 auto;
}

.handler {
width: 20px;
padding: 0;
cursor: ew-resize;
flex: 0 0 auto;
}

.handler::before {
content: '';
display: block;
width: 4px;
height: 100%;
background: red;
margin: 0 auto;
}
Loading

0 comments on commit 195cfee

Please sign in to comment.