-
+} @if (node && node.children && node.expanded) {
+
+ @for (child of node.children; track child) {
+
+ }
+}
diff --git a/src/components/window/window-config.ts b/src/components/window/window-config.ts
new file mode 100644
index 0000000..6f71e33
--- /dev/null
+++ b/src/components/window/window-config.ts
@@ -0,0 +1,11 @@
+export interface WindowConfig {
+ height?: number;
+ width?: number;
+ x?: number;
+ y?: number;
+
+ resizable?: boolean;
+ closable?: boolean;
+
+ title?: string;
+}
diff --git a/src/components/window/window.component.html b/src/components/window/window.component.html
new file mode 100644
index 0000000..8fb59a6
--- /dev/null
+++ b/src/components/window/window.component.html
@@ -0,0 +1,36 @@
+
+
+
diff --git a/src/components/window/window.component.scss b/src/components/window/window.component.scss
new file mode 100644
index 0000000..929f8d9
--- /dev/null
+++ b/src/components/window/window.component.scss
@@ -0,0 +1,93 @@
+:host {
+ position: absolute;
+ // border: 1px solid black;
+ background-color: transparent;
+ display: flex;
+ flex-direction: row;
+}
+
+.wrap {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow: hidden;
+}
+
+.header {
+ background-color: lightgray;
+ border-bottom: 1px solid black;
+ padding: 2px 4px 0px 5px;
+ display: flex;
+ flex-direction: row;
+}
+
+.resize {
+ background-color: inherit;
+}
+
+.horizontal {
+ height: 0px;
+ width: 100%;
+}
+
+.vertical {
+ height: 100%;
+ width: 0px;
+}
+
+.top {
+ cursor: ns-resize;
+ // margin-top: 2px;
+ border-top: 1px solid black;
+ background-color: lightgray;
+}
+
+.bottom {
+ cursor: ns-resize;
+ // margin-bottom: 2px;
+ border-bottom: 1px solid black;
+ background-color: white;
+}
+
+.left {
+ cursor: ew-resize;
+ // margin-left: 2px;
+ border-left: 1px solid black;
+}
+
+.right {
+ cursor: ew-resize;
+ // margin-right: 2px;
+ border-right: 1px solid black;
+}
+
+.grab {
+ cursor: grabbing;
+}
+
+.content {
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ padding: 2px;
+ background-color: white;
+ overflow: scroll;
+}
+
+.clickable {
+ cursor: pointer;
+}
+
+.icon {
+ float: right;
+}
+
+.title {
+ flex: 1;
+}
+
+.ellipsis {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
diff --git a/src/components/window/window.component.spec.ts b/src/components/window/window.component.spec.ts
new file mode 100644
index 0000000..46ffab2
--- /dev/null
+++ b/src/components/window/window.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WindowComponent } from './window.component';
+
+describe('WindowComponent', () => {
+ let component: WindowComponent;
+ let fixture: ComponentFixture
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [WindowComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(WindowComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/components/window/window.component.ts b/src/components/window/window.component.ts
new file mode 100644
index 0000000..34aca0b
--- /dev/null
+++ b/src/components/window/window.component.ts
@@ -0,0 +1,140 @@
+import {
+ Component,
+ EventEmitter,
+ HostBinding,
+ Inject,
+ Input,
+ Output,
+} from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faRectangleXmark } from '@fortawesome/free-regular-svg-icons';
+import { WindowConfig } from './window-config';
+
+export enum Resize {
+ Top = 't',
+ Right = 'r',
+ Bottom = 'b',
+ Left = 'l',
+}
+
+@Component({
+ selector: 'fbi-window',
+ standalone: true,
+ imports: [CommonModule, FontAwesomeModule],
+ templateUrl: './window.component.html',
+ styleUrls: ['./window.component.scss'],
+})
+export class WindowComponent {
+ @HostBinding('style.height.px') height: number = 200;
+ @HostBinding('style.width.px') width: number = 400;
+ @HostBinding('style.left.px') x: number = 200;
+ @HostBinding('style.top.px') y: number = 200;
+ @HostBinding('style.visibility') visibility: string = 'hidden';
+ private _display: boolean = false;
+ private get visible() {
+ return this._display;
+ }
+ private set visible(value: boolean) {
+ this._display = value;
+ this.visibility = value ? 'visible' : 'hidden';
+ }
+
+ @Input() config!: WindowConfig;
+ @Output() closing = new EventEmitter();
+
+ dragging: boolean = false;
+ resizing: boolean = false;
+
+ faRectangleXmark = faRectangleXmark;
+ Resize = Resize;
+
+ constructor(@Inject(DOCUMENT) private _document: Document) {
+ this.visible = true;
+ }
+
+ toggle = (display?: boolean) => (this.visible = display ?? !this.visible);
+ hide = () => this.toggle(false);
+ show = () => this.toggle(true);
+
+ startDrag(event: MouseEvent): void {
+ event.preventDefault();
+ const { innerHeight, innerWidth } = window;
+ const { clientX, clientY } = event;
+ const x = this.x;
+ const y = this.y;
+ const h = this.height;
+ const w = this.width;
+ const doc = this._document;
+
+ this.dragging = true;
+ const dragging = (e: MouseEvent) => {
+ this.x = Math.min(Math.max(x + e.clientX - clientX, 0), innerWidth - w);
+ this.y = Math.min(Math.max(y + e.clientY - clientY, 0), innerHeight - h);
+ };
+
+ const dragEnd = (e: MouseEvent) => {
+ this.dragging = false;
+ doc.removeEventListener('mousemove', dragging);
+ doc.removeEventListener('mouseup', dragEnd);
+ };
+
+ doc.addEventListener('mousemove', dragging);
+ doc.addEventListener('mouseup', dragEnd);
+ }
+
+ startResize(event: MouseEvent, anchor: Resize): void {
+ event.preventDefault();
+ const { innerHeight, innerWidth } = window;
+ const { clientX, clientY } = event;
+ const x = this.x;
+ const y = this.y;
+ const h = this.height;
+ const w = this.width;
+ const doc = this._document;
+ const minH = 32;
+ const minW = 100;
+
+ this.resizing = true;
+ const resizing = (e: MouseEvent) => {
+ const dx = e.clientX - clientX;
+ const dy = e.clientY - clientY;
+
+ switch (anchor) {
+ case Resize.Top:
+ this.y = Math.min(Math.max(y + dy, 0), y + h - minH);
+ if (this.y > 0)
+ this.height = Math.min(
+ Math.max(h - dy, minH),
+ innerHeight - this.y
+ );
+ break;
+ case Resize.Bottom:
+ this.height = Math.min(Math.max(h + dy, minH), innerHeight - this.y);
+ break;
+ case Resize.Left:
+ this.x = Math.min(Math.max(x + dx, 0), x + w - minW);
+ if (this.x > 0)
+ this.width = Math.min(Math.max(w - dx, minW), innerWidth - this.x);
+ break;
+ case Resize.Right:
+ this.width = Math.min(Math.max(w + dx, minW), innerWidth - this.x);
+ break;
+ }
+ };
+
+ const resizeEnd = (e: MouseEvent) => {
+ this.resizing = false;
+ doc.removeEventListener('mousemove', resizing);
+ doc.removeEventListener('mouseup', resizeEnd);
+ };
+ doc.addEventListener('mousemove', resizing);
+ doc.addEventListener('mouseup', resizeEnd);
+ }
+
+ onClose(event: MouseEvent): void {
+ event.preventDefault();
+ this.hide();
+ this.closing.emit();
+ }
+}