diff --git a/firebird-ng/src/app/pages/geometry-tree/geometry-tree-window/geometry-tree-window.component.ts b/firebird-ng/src/app/pages/geometry-tree/geometry-tree-window/geometry-tree-window.component.ts index 7cb0878..5defe6d 100644 --- a/firebird-ng/src/app/pages/geometry-tree/geometry-tree-window/geometry-tree-window.component.ts +++ b/firebird-ng/src/app/pages/geometry-tree/geometry-tree-window/geometry-tree-window.component.ts @@ -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; @@ -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; diff --git a/firebird-ng/src/app/pages/main-display/main-display.component.html b/firebird-ng/src/app/pages/main-display/main-display.component.html index 3bd0f3c..a79c1db 100644 --- a/firebird-ng/src/app/pages/main-display/main-display.component.html +++ b/firebird-ng/src/app/pages/main-display/main-display.component.html @@ -5,11 +5,15 @@ -
+
- +
+ +
+ +
-
+
@@ -71,66 +75,67 @@ -
-
- +
-
+
- - - - - + + + + + -
{{currentTime | number:'1.1-1'}}
- - - -
{{maxTime | number:'1.0-0'}} [ns]   
+
{{currentTime | number:'1.1-1'}}
+ + + +
{{maxTime | number:'1.0-0'}} [ns]   
- - - - + + + + - - - -
{{message}}
-    + + + +
{{message}}
+    - + - + -
{{currentGeometry}}
+
{{currentGeometry}}
+
+ +
diff --git a/firebird-ng/src/app/pages/main-display/main-display.component.scss b/firebird-ng/src/app/pages/main-display/main-display.component.scss index 94a0026..0a1732c 100644 --- a/firebird-ng/src/app/pages/main-display/main-display.component.scss +++ b/firebird-ng/src/app/pages/main-display/main-display.component.scss @@ -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; +} diff --git a/firebird-ng/src/app/pages/main-display/main-display.component.ts b/firebird-ng/src/app/pages/main-display/main-display.component.ts index 0bfa4b2..46dd99b 100644 --- a/firebird-ng/src/app/pages/main-display/main-display.component.ts +++ b/firebird-ng/src/app/pages/main-display/main-display.component.ts @@ -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'; @@ -101,6 +101,8 @@ export class MainDisplayComponent implements OnInit { selectedEventKey: string|undefined; private beamAnimationTime: number = 1000; + private isHandlerDragging = false; + constructor( private geomService: GeometryService, @@ -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); diff --git a/firebird-ng/src/app/pages/split-window/split-window.component.html b/firebird-ng/src/app/pages/split-window/split-window.component.html index 5036092..00d32a0 100644 --- a/firebird-ng/src/app/pages/split-window/split-window.component.html +++ b/firebird-ng/src/app/pages/split-window/split-window.component.html @@ -1 +1,6 @@

split-window works!

+
+
A
+
+
B
+
diff --git a/firebird-ng/src/app/pages/split-window/split-window.component.scss b/firebird-ng/src/app/pages/split-window/split-window.component.scss index e69de29..ecb1e1e 100644 --- a/firebird-ng/src/app/pages/split-window/split-window.component.scss +++ b/firebird-ng/src/app/pages/split-window/split-window.component.scss @@ -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; +} diff --git a/firebird-ng/src/app/pages/split-window/split-window.component.ts b/firebird-ng/src/app/pages/split-window/split-window.component.ts index 1ce1154..9c73c6f 100644 --- a/firebird-ng/src/app/pages/split-window/split-window.component.ts +++ b/firebird-ng/src/app/pages/split-window/split-window.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core' +import {Component, OnInit, ChangeDetectionStrategy, AfterViewInit, ElementRef, Renderer2} from '@angular/core' // import { AComponent } from '../../ui/components/AComponent' // import { SplitAreaSize, SplitGutterInteractionEvent } from 'angular-split' @@ -53,6 +53,42 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core' templateUrl: './split-window.component.html', styleUrl: './split-window.component.scss' }) -export class SplitWindowComponent { +export class SplitWindowComponent implements AfterViewInit { + private isHandlerDragging = false; + constructor(private elRef: ElementRef, private renderer: Renderer2) {} + + ngAfterViewInit() { + const handler = this.elRef.nativeElement.querySelector('.handler'); + const wrapper = handler.closest('.container'); + const boxA = wrapper.querySelector('.box'); + + this.renderer.listen(handler, 'mousedown', (e: MouseEvent) => { + // Если событие mousedown произошло на элементе .handler, флаг переключается на true + this.isHandlerDragging = true; + }); + + this.renderer.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.renderer.listen(document, 'mouseup', () => { + this.isHandlerDragging = false; + }); + } }