Skip to content

Commit

Permalink
Merge branch '14-scene-introspection-sidebar' into 13-pyrobird-cli-flask
Browse files Browse the repository at this point in the history
  • Loading branch information
@DraTeots
DraTeots committed Oct 4, 2024
2 parents aa0e1a1 + bd93c4d commit 4145ba0
Show file tree
Hide file tree
Showing 17 changed files with 2,699 additions and 221 deletions.
2,113 changes: 2,095 additions & 18 deletions firebird-ng/package-lock.json
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion firebird-ng/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@
"@angular/router": "^17.3.0",
"@tweenjs/tween.js": "^23.1.2",
"@types/picomatch": "^2.3.3",
"angular-split": "^17.2.0",
"angular-split": "^17.1.1",
"component": "^1.1.0",
"jsdom": "^24.0.0",
"jsonc-parser": "^3.3.1",
"jsrootdi": "^7.6.101",
Expand Down
4 changes: 4 additions & 0 deletions firebird-ng/src/app/app.routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,8 @@ export const routes: Routes = [
path: 'geometry',
loadComponent: () => import('./pages/geometry-tree/geometry-tree.component').then(m => m.GeometryTreeComponent)
},
{
path: 'split-window',
loadComponent: () => import('./pages/split-window/split-window.component').then(m => m.SplitWindowComponent)
},
];
23 changes: 13 additions & 10 deletions ...d-ng/src/app/pages/geometry-tree/geometry-tree-window/geometry-tree-window.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
<button mat-icon-button (click)="toggleWindow()" class="tree-button">
<mat-icon>{{ windowOpenState ? 'close' : 'account_tree' }}</mat-icon>
</button>
<!--<button mat-icon-button (click)="toggleWindow()" class="tree-button">-->
<!-- <mat-icon>{{ windowOpenState ? 'close' : 'account_tree' }}</mat-icon>-->
<!--</button>-->

<div class="window" *ngIf="windowOpenState" #windowContainer [class.side-nav]="sideNavOpen">
<div class="window" #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>
<!-- <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>
<app-geometry-tree ></app-geometry-tree>

<div class="resize-handle" *ngIf="!sideNavOpen" #resizeHandle></div>
<!-- <div class="resize-handle" *ngIf="!sideNavOpen" #resizeHandle></div>-->
</div>
<!--<div class="window">-->
<!-- <app-geometry-tree></app-geometry-tree>-->
<!--</div>-->
79 changes: 25 additions & 54 deletions ...d-ng/src/app/pages/geometry-tree/geometry-tree-window/geometry-tree-window.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,34 @@
}
}


.window {
position: absolute;

width: 400px;
height: 400px;
border: 1px solid #ccc;
//height: 400px;
background-color: #2e2e2e;
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
resize: both;
min-width: 200px;
min-height: 200px;
color: white;
overflow-y: auto;
//display: flex;
//flex-direction: column;
//border-radius: 8px;
//min-width: 200px;
//min-height: 200px;
//color: white;
//overflow-y: auto;
//transition: width 0.3s ease, left 0.3s ease;
//z-index: 1000;

//&.side-nav {
// position: fixed;
// left: 0;
// top: 60px;
// height: 100%;
// width: 250px;
// max-width: 250px;
// z-index: 1100;
//}
//
//&.shifted {
// margin-left: 400px;
//}
}

.window-header {
Expand All @@ -48,47 +60,6 @@
align-items: center;
}

.resize-handle {
width: 16px;
height: 16px;
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;
}
}
100 changes: 62 additions & 38 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
@@ -1,8 +1,8 @@
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";
import {NgIf} from "@angular/common";
import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy, Renderer2 } from '@angular/core';
import { MatIconButton } from "@angular/material/button";
import { MatIcon } from "@angular/material/icon";
import { GeometryTreeComponent } from "../geometry-tree.component";
import { NgIf } from "@angular/common";

@Component({
selector: 'geometry-tree-window',
Expand All @@ -17,8 +17,9 @@ import {NgIf} from "@angular/common";
standalone: true
})
export class GeometryTreeWindowComponent implements AfterViewInit, OnDestroy {
windowOpenState = false;
sideNavOpen = false;
// windowOpenState = false;
sideNavOpen = true;
isDetached = false;

@ViewChild('windowContainer', { static: false }) windowContainer!: ElementRef;
@ViewChild('windowHeader', { static: false }) windowHeader!: ElementRef;
Expand All @@ -34,11 +35,14 @@ export class GeometryTreeWindowComponent implements AfterViewInit, OnDestroy {
private resizeMouseMoveHandler: any;
private resizeMouseUpHandler: any;

constructor(private renderer: Renderer2) {}

ngAfterViewInit() {
if (this.windowOpenState) {
this.initDrag();
this.initResize();
}
// if (this.windowOpenState) {
// this.initDrag();
// this.initResize();
//
// }
}

ngOnDestroy() {
Expand All @@ -47,21 +51,49 @@ export class GeometryTreeWindowComponent implements AfterViewInit, OnDestroy {
}

toggleWindow() {
this.windowOpenState = !this.windowOpenState;

if (this.windowOpenState) {
setTimeout(() => {
this.initDrag();
this.initResize();
});
} else {
this.removeDragListeners();
this.removeResizeListeners();
}
// this.windowOpenState = !this.windowOpenState;
// if (this.windowOpenState) {
// setTimeout(() => {
// this.initDrag();
// this.initResize();
//
// });
// } else {
// this.removeDragListeners();
// this.removeResizeListeners();
//
// }
}

// toggleSideNav() {
// this.isDetached = !this.isDetached;
//
// if (!this.isDetached) {
//
// this.sideNavOpen = true;
// this.renderer.setStyle(this.windowContainer.nativeElement, 'left', '0px');
// this.renderer.setStyle(this.windowContainer.nativeElement, 'top', '60px');
// this.renderer.setStyle(this.windowContainer.nativeElement, 'position', 'fixed');
// this.renderer.setStyle(this.windowContainer.nativeElement, 'width', '300px');
// this.renderer.setStyle(this.windowContainer.nativeElement, 'height', '100vh');
// this.removeDragListeners();
// } else {
//
// this.sideNavOpen = false;
// this.renderer.setStyle(this.windowContainer.nativeElement, 'position', 'absolute');
// this.renderer.setStyle(this.windowContainer.nativeElement, 'width', '400px');
// this.renderer.setStyle(this.windowContainer.nativeElement, 'height', '400px');
// this.initDrag();
// }
// this.updateMainContentShift();
// }





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

const windowElement = this.windowContainer.nativeElement;

Expand Down Expand Up @@ -97,7 +129,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 All @@ -114,9 +146,13 @@ export class GeometryTreeWindowComponent implements AfterViewInit, OnDestroy {
const dx = e.clientX - this.lastX;
const dy = e.clientY - this.lastY;

windowElement.style.width = windowElement.offsetWidth + dx + 'px';
windowElement.style.height = windowElement.offsetHeight + dy + 'px';

if (this.sideNavOpen) {
windowElement.style.width = windowElement.offsetWidth + dx + 'px';
} else {
windowElement.style.width = windowElement.offsetWidth + dx + 'px';
windowElement.style.height = windowElement.offsetHeight + dy + 'px';
}
this.lastX = e.clientX;
this.lastY = e.clientY;
}
Expand All @@ -143,16 +179,4 @@ export class GeometryTreeWindowComponent implements AfterViewInit, OnDestroy {
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 = '';
}
}

}
4 changes: 3 additions & 1 deletion firebird-ng/src/app/pages/geometry-tree/geometry-tree.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<p>geometry-tree works!</p>
<button mat-raised-button aria-label="Refresh" matTooltip="Refresh tree with current geometry" class="" (click)="refreshGeometry()" >
<mat-icon>refresh</mat-icon>
</button>

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<!-- This is the tree node template for leaf nodes -->
Expand Down
12 changes: 10 additions & 2 deletions firebird-ng/src/app/pages/geometry-tree/geometry-tree.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,12 @@ import {NestedTreeControl, FlatTreeControl, } from '@angular/cdk/tree';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';

import {MatIcon, MatIconModule} from '@angular/material/icon';
import {MatButtonModule, MatIconButton} from '@angular/material/button';
import {MatButton, MatButtonModule, MatIconButton} from '@angular/material/button';
import {GeometryService} from "../../services/geometry.service";
import {Object3D} from "three";
import {EventDisplayService} from "phoenix-ui-components";
import {PhoenixThreeFacade} from "../../utils/phoenix-three-facade";
import {MatTooltip} from "@angular/material/tooltip";

/**
* Food data with nested structure.
Expand Down Expand Up @@ -68,7 +69,9 @@ interface ExampleFlatNode {
MatTreeNodeDef,
MatIcon,
MatTreeNodeOutlet,
MatTreeNodePadding
MatTreeNodePadding,
MatButton,
MatTooltip
],
templateUrl: './geometry-tree.component.html',
styleUrl: './geometry-tree.component.scss'
Expand Down Expand Up @@ -135,4 +138,9 @@ export class GeometryTreeComponent implements OnInit{
this.geomService.toggleVisibility(node.object3D);
node.visible = !node.visible;
}

refreshGeometry() {
this.dataSource.data = [];
this.dataSource.data = this.threeFacade.scene.children;
}
}
Loading

0 comments on commit 4145ba0

Please sign in to comment.