AltitudeWeb/frontend/src/app/particles/particles.component.ts

import {Component, ElementRef, ViewChild} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select';
import {MatSliderModule} from '@angular/material/slider';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatTabsModule} from '@angular/material/tabs';
import {MatCardModule} from '@angular/material/card';
import {MatIconModule} from '@angular/material/icon';
import {HeaderComponent} from '../header/header.component';

// Services
import {IntersectionPlaneService} from './services/intersection-plane.service';
import {ParticleManagerService} from './services/particle-manager.service';

// Models
import {PropertiesComponent} from './components/properties/properties.component';
import {ParticleComponent} from './components/particle/particle.component';
import {FramesComponent} from './components/frames/frames.component';
import {MatSnackBar} from '@angular/material/snack-bar';
import {RenderContainerComponent} from './components/render-container/render-container.component';

@Component({
  selector: 'app-particles',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatInputModule,
    MatFormFieldModule,
    MatSelectModule,
    MatSliderModule,
    MatCheckboxModule,
    MatTabsModule,
    MatCardModule,
    MatIconModule,
    HeaderComponent,
    PropertiesComponent,
    ParticleComponent,
    FramesComponent,
    RenderContainerComponent,
  ],
  templateUrl: './particles.component.html',
  styleUrl: './particles.component.scss'
})
export class ParticlesComponent {
  @ViewChild('planeSlider') planeSlider!: ElementRef;

  constructor(
    private intersectionPlaneService: IntersectionPlaneService,
    private particleManagerService: ParticleManagerService,
    private matSnackBar: MatSnackBar,
  ) {
  }

  /**
   * Update plane position based on slider
   */
  public updatePlanePosition(event: Event): void {
    const slider = event.target as HTMLInputElement;
    const value = Number(slider.value);
    this.intersectionPlaneService.updatePlanePosition(value);
  }

  /**
   * Get the current plane position
   */
  public get planePosition(): number {
    return this.intersectionPlaneService.getPlanePosition();
  }

  public set planePosition(newPlanePosition: number) {
    this.intersectionPlaneService.updatePlanePosition(newPlanePosition);
  }

  public get maxOffset(): number {
    return this.intersectionPlaneService.getMaxOffset();
  }

  public get minOffset(): number {
    return this.intersectionPlaneService.getMinOffset();
  }

  /**
   * Generate JSON output
   */
  public generateJson(): string {
    return this.particleManagerService.generateJson();
  }

  public copyJson() {
    navigator.clipboard.writeText(this.generateJson()).then(() => {
      this.matSnackBar.open('Copied to clipboard', '', {duration: 2000})
    });
  }
}