Modularize ParticlesComponent by separating particle, frame, and property functionalities into dedicated components

Refactored `ParticlesComponent` to use `ParticleComponent`, `FramesComponent`, and `PropertiesComponent` for better organization and reusability. Updated layout, improved UI structure, and centralized particle management logic. Enhanced clipboard functionality with a new JSON copy feature.
2025-06-22 19:06:52 +02:00
parent 3a6f137c9a
commit 023ae809ef
16 changed files with 497 additions and 332 deletions
@@ -0,0 +1,41 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Frames</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="frames-container">
+      <mat-tab-group [selectedIndex]="frames.indexOf(currentFrame)"
+                     (selectedIndexChange)="switchFrame(frames[$event])">
+        <mat-tab *ngFor="let frameId of frames" [label]="frameId">
+          <div class="frame-content">
+            <h3>Particles in {{ frameId }}</h3>
+            <div class="particles-list">
+              <div *ngFor="let particle of particleData.frames[frameId]; let i = index" class="particle-item">
+                    <span>Particle {{ i + 1 }}: ({{ particle.x.toFixed(2) }}, {{ particle.y.toFixed(2) }}
+                      , {{ particle.z.toFixed(2) }})</span>
+                <button mat-icon-button color="warn" (click)="removeParticle(frameId, i)">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </div>
+              <div *ngIf="!particleData.frames[frameId] || particleData.frames[frameId].length === 0"
+                   class="no-particles">
+                No particles in this frame. Click on the plane to add particles.
+              </div>
+            </div>
+            <div class="frame-actions">
+              <button mat-raised-button color="warn" (click)="removeFrame(frameId)"
+                      [disabled]="frames.length <= 1">
+                Remove Frame
+              </button>
+            </div>
+          </div>
+        </mat-tab>
+      </mat-tab-group>
+      <div class="add-frame">
+        <button mat-raised-button color="primary" (click)="addFrame()">
+          Add New Frame
+        </button>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>