components/firebird-display/firebird-display.component.ts

0001 import {
0002   AfterViewInit,
0003   ChangeDetectionStrategy,
0004   Component,
0005   ElementRef,
0006   OnDestroy,
0007   inject,
0008   input,
0009   output,
0010 } from '@angular/core';
0011 import { EventDisplayService } from '../../services/event-display.service';
0012
0013 /**
0014  * The event display: the shared three.js canvas, filling this element.
0015  *
0016  * On creation it attaches the display here (`EventDisplayService.attach()`):
0017  * the canvas and the main view move in, the canvas follows the element's
0018  * size, the configured geometry and events load, and the queued startup
0019  * commands run. On destruction it detaches again; the scene and the loaded
0020  * data stay for the next `<firebird-display>`.
0021  *
0022  * Give the element a definite size (the default styles fill the parent).
0023  * Content projected into it sits in front of the canvas, positioned by the
0024  * host page: the quad view places its view cells there.
0025  *
0026  * ```html
0027  * <firebird-display (attached)="addMyViews()"></firebird-display>
0028  * ```
0029  */
0030 @Component({
0031   selector: 'firebird-display',
0032   template: '<ng-content />',
0033   styles: ':host { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; }',
0034   changeDetection: ChangeDetectionStrategy.OnPush,
0035 })
0036 export class FirebirdDisplayComponent implements AfterViewInit, OnDestroy {
0037   /**
0038    * Loads the configured geometry and events once attached. Default true;
0039    * the queued startup commands run either way.
0040    */
0041   readonly autoLoad = input(true);
0042
0043   /**
0044    * Emits once the renderer is attached here, before the configured sources
0045    * load: the moment for setup that needs the scene (extra views, panels).
0046    */
0047   readonly attached = output<void>();
0048
0049   private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
0050   private readonly eventDisplay = inject(EventDisplayService);
0051   private detach?: () => void;
0052
0053   ngAfterViewInit(): void {
0054     this.detach = this.eventDisplay.attach(this.host.nativeElement, {
0055       autoLoad: this.autoLoad(),
0056       onAttached: () => this.attached.emit(),
0057     });
0058   }
0059
0060   ngOnDestroy(): void {
0061     this.detach?.();
0062   }
0063 }