components/geometry-clipping/geometry-clipping.component.ts

0001 import {
0002   Component,
0003   ViewChild,
0004   TemplateRef,
0005   ElementRef,
0006   ViewContainerRef,
0007   ChangeDetectionStrategy,
0008   inject,
0009 } from '@angular/core';
0010 import {MatCheckbox, MatCheckboxChange} from '@angular/material/checkbox';
0011 import {MatSlideToggleChange} from '@angular/material/slide-toggle';
0012
0013 import { ConfigService } from '@dexvis/app-features';
0014 import {MatMenuItem} from "@angular/material/menu";
0015 import {MatSlider, MatSliderThumb} from "@angular/material/slider";
0016
0017 import {MatButton, MatIconButton} from "@angular/material/button";
0018
0019 import {MatDialog, MatDialogClose, MatDialogRef} from "@angular/material/dialog";
0020 import {MatIcon} from "@angular/material/icon";
0021 import {MatTooltip} from "@angular/material/tooltip";
0022 import {FormsModule} from "@angular/forms";
0023 import {MatSlideToggle} from "@angular/material/slide-toggle";
0024 import {
0025   CLIPPING_ENABLED_CONFIG,
0026   CLIPPING_OPENING_ANGLE_CONFIG,
0027   CLIPPING_START_ANGLE_CONFIG,
0028   Z_CLIPPING_ENABLED_CONFIG,
0029   Z_CLIPPING_FORWARD_CONFIG,
0030   Z_CLIPPING_POSITION_CONFIG,
0031 } from '@dexvis/firebird-ng/api';
0032
0033
0034 /**
0035  * Toolbar panel for the geometry clipping of the main view. A view and an
0036  * editor of the clipping config keys only: ThreeService applies the keys to
0037  * the scene, so a deep link, the server config or a saved value clips the
0038  * same way with or without this panel on the page.
0039  */
0040 @Component({
0041   selector: 'app-geometry-clipping',
0042   templateUrl: './geometry-clipping.component.html',
0043   styleUrls: ['./geometry-clipping.component.scss'],
0044   changeDetection: ChangeDetectionStrategy.OnPush,
0045   imports: [
0046     MatSlider,
0047     MatMenuItem,
0048     MatSliderThumb,
0049     MatCheckbox,
0050     MatButton,
0051     MatIcon,
0052     MatDialogClose,
0053     MatIconButton,
0054     MatTooltip,
0055     FormsModule,
0056     MatSlideToggle,
0057   ]
0058 })
0059 export class GeometryClippingComponent {
0060   private readonly config = inject(ConfigService);
0061   private readonly dialog = inject(MatDialog);
0062   private readonly viewContainerRef = inject(ViewContainerRef);
0063
0064   private readonly clippingEnabledProperty = this.config.declare(CLIPPING_ENABLED_CONFIG);
0065   private readonly startAngleProperty = this.config.declare(CLIPPING_START_ANGLE_CONFIG);
0066   private readonly openingAngleProperty = this.config.declare(CLIPPING_OPENING_ANGLE_CONFIG);
0067   private readonly zClippingEnabledProperty = this.config.declare(Z_CLIPPING_ENABLED_CONFIG);
0068   private readonly zClippingPositionProperty = this.config.declare(Z_CLIPPING_POSITION_CONFIG);
0069   private readonly zClippingForwardProperty = this.config.declare(Z_CLIPPING_FORWARD_CONFIG);
0070
0071   // Signals of the config values: the dialog template reads them, and they
0072   // follow changes from any source.
0073   readonly clippingEnabled = this.clippingEnabledProperty.valueSignal;
0074   readonly startAngle = this.startAngleProperty.valueSignal;
0075   readonly openingAngle = this.openingAngleProperty.valueSignal;
0076   readonly zClippingEnabled = this.zClippingEnabledProperty.valueSignal;
0077   readonly zClippingPosition = this.zClippingPositionProperty.valueSignal;
0078   readonly zClippingForward = this.zClippingForwardProperty.valueSignal;
0079
0080   @ViewChild('openBtn', { read: ElementRef }) openBtn!: ElementRef;
0081   @ViewChild('dialogTemplate') dialogTemplate!: TemplateRef<any>;
0082   dialogRef: MatDialogRef<any> | null = null;
0083
0084   /** User toggles wedge clipping. A runtime write: saved, and it ends a URL override. */
0085   toggleClipping(change: MatCheckboxChange): void {
0086     this.clippingEnabledProperty.value = change.checked;
0087   }
0088
0089   /** User changes the start angle. */
0090   changeStartClippingAngle(angle: number): void {
0091     if (!isNaN(angle)) {
0092       this.startAngleProperty.value = angle;
0093     }
0094   }
0095
0096   /** User changes the opening angle. */
0097   changeOpeningClippingAngle(angle: number): void {
0098     if (!isNaN(angle)) {
0099       this.openingAngleProperty.value = angle;
0100     }
0101   }
0102
0103   /** User toggles Z clipping. */
0104   toggleZClipping(change: MatCheckboxChange): void {
0105     this.zClippingEnabledProperty.value = change.checked;
0106   }
0107
0108   /** User changes the Z clipping position. */
0109   changeZClippingPosition(z: number): void {
0110     if (!isNaN(z)) {
0111       this.zClippingPositionProperty.value = z;
0112     }
0113   }
0114
0115   /** User toggles the Z clipping direction. */
0116   toggleZClippingDirection(change: MatSlideToggleChange): void {
0117     this.zClippingForwardProperty.value = change.checked;
0118   }
0119
0120   openDialog(): void {
0121     if (this.dialogRef) {
0122       this.dialogRef.close();
0123       return;
0124     }
0125
0126     const rect = this.openBtn.nativeElement.getBoundingClientRect();
0127     const dialogWidth = 320;
0128
0129     const left = Math.max(rect.right - dialogWidth, 8);
0130     const top = rect.bottom + 12;
0131
0132     this.dialogRef = this.dialog.open(this.dialogTemplate, {
0133       position: {
0134         top: `${top}px`,
0135         left: `${left}px`
0136       },
0137       hasBackdrop: false,
0138       panelClass: 'custom-position-dialog',
0139       autoFocus: false,
0140       viewContainerRef: this.viewContainerRef
0141     });
0142
0143     this.dialogRef.afterClosed().subscribe(() => {
0144       this.dialogRef = null;
0145     });
0146   }
0147 }