Add an option to highlight particles

frontend/src/app/particles/services/particle-manager.service.ts

@@ -1,7 +1,7 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 import * as THREE from 'three';
-import { RendererService } from './renderer.service';
-import { ParticleData, ParticleInfo, ParticleType } from '../models/particle.model';
+import {RendererService} from './renderer.service';
+import {ParticleData, ParticleInfo, ParticleType} from '../models/particle.model';
 
 /**
  * Service responsible for managing particles in the scene
@@ -32,7 +32,8 @@ export class ParticleManagerService {
   private frames: string[] = ['frame1'];
   private selectedColor: string = '#ff0000';
 
-  constructor(private rendererService: RendererService) {}
+  constructor(private rendererService: RendererService) {
+  }
 
   /**
    * Adds a particle at the specified position
@@ -120,6 +121,51 @@ export class ParticleManagerService {
     }
   }
 
+  highlightParticle(frameId: string, index: number): void {
+    if (!(this.particleData.frames[frameId] && this.particleData.frames[frameId].length > index)) {
+      return;
+    }
+    const particleInfo = this.particleData.frames[frameId][index];
+    const colorParts = particleInfo.color.split(',');
+    const color = new THREE.Color(
+      parseFloat(colorParts[0]),
+      parseFloat(colorParts[1]),
+      parseFloat(colorParts[2])
+    );
+    const particleMaterial = new THREE.MeshBasicMaterial({color});
+    const particleGeometry = new THREE.SphereGeometry(0.03, 16, 16);
+    const particleMesh = new THREE.Mesh(particleGeometry, particleMaterial);
+    particleMesh.position.set(particleInfo.x, particleInfo.y, particleInfo.z);
+    this.rendererService.scene.add(particleMesh);
+    this.particles.push(particleMesh);
+    this.animatePulse(particleMesh, 3, () => {
+      this.rendererService.scene.remove(particleMesh);
+      this.clearParticleVisuals();
+      this.renderFrameParticles(this.currentFrame);
+    });
+  }
+
+  private animatePulse(mesh: THREE.Mesh, cycles: number, onComplete: () => void): void {
+    const duration = 300;
+    const maxScale = 0.08 / 0.03;
+    const startTime = performance.now();
+
+    const animate = (time: number) => {
+      const elapsed = (time - startTime) % duration;
+      const t = elapsed / (duration / 2);
+      const scaleFactor = t <= 1 ? 1 + (maxScale - 1) * t : maxScale - (maxScale - 1) * (t - 1);
+      mesh.scale.setScalar(scaleFactor);
+
+      if (time - startTime >= duration * cycles) {
+        onComplete();
+      } else {
+        requestAnimationFrame(animate);
+      }
+    };
+
+    requestAnimationFrame(animate);
+  }
+
   /**
    * Sets the selected color for new particles
    */