Add toggle for enabling/disabling grid snap in RenderContainerComponent and update snapping logic.

frontend/src/app/pages/particles/components/render-container/render-container.component.html

@@ -35,6 +35,11 @@
               [matTooltip]="gridVisible ? 'Hide grid' : 'Show grid'">
         <mat-icon>{{ gridVisible ? 'grid_off' : 'grid_on' }}</mat-icon>
       </button>
+
+      <button mat-mini-fab color="primary" (click)="gridSnapEnabled = !gridSnapEnabled"
+              [matTooltip]="gridSnapEnabled ? 'Disable grid snap' : 'Enable grid snap'">
+        <mat-icon>{{ gridSnapEnabled ? 'push_pin' : 'pinch' }}</mat-icon>
+      </button>
     </div>
 
     @if (isPlaneLocked) {

frontend/src/app/pages/particles/components/render-container/render-container.component.ts

@@ -103,6 +103,15 @@ export class RenderContainerComponent implements AfterViewInit, OnDestroy {
     this.intersectionPlaneService.setGridDensity(d);
   }
 
+  // Grid snap proxies
+  public get gridSnapEnabled(): boolean {
+    return this.intersectionPlaneService.getGridSnapEnabled();
+  }
+
+  public set gridSnapEnabled(v: boolean) {
+    this.intersectionPlaneService.setGridSnapEnabled(v);
+  }
+
   /**
    * Toggle the plane locked state
    */

frontend/src/app/pages/particles/services/intersection-plane.service.ts

@@ -32,6 +32,7 @@ export class IntersectionPlaneService {
   private gridHelper?: THREE.GridHelper;
   private gridVisible: boolean = true;
   private gridDensity: number = 4;
+  private gridSnapEnabled: boolean = true;
 
   // Emits whenever plane position, orientation, or lock-affecting orientation updates change visuals
   public readonly planeChanged$ = new Subject<void>();
@@ -111,6 +112,14 @@ export class IntersectionPlaneService {
     return this.gridDensity;
   }
 
+  public setGridSnapEnabled(enabled: boolean): void {
+    this.gridSnapEnabled = enabled;
+  }
+
+  public getGridSnapEnabled(): boolean {
+    return this.gridSnapEnabled;
+  }
+
   /**
    * Creates the intersection plane and adds it to the scene
    */

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

@@ -57,9 +57,11 @@ export class ParticleManagerService {
     const divisions = Math.max(1, Math.floor(planeSize * this.intersectionPlaneService.getGridDensity()));
     const gridStepPlane = planeSize / divisions;
 
-    x = Math.round(x / gridStepPlane) * gridStepPlane;
+    if (this.intersectionPlaneService.getGridSnapEnabled()) {
-    y = Math.round(y / gridStepPlane) * gridStepPlane;
+      x = Math.round(x / gridStepPlane) * gridStepPlane;
-    z = Math.round(z / gridStepPlane) * gridStepPlane;
+      y = Math.round(y / gridStepPlane) * gridStepPlane;
+      z = Math.round(z / gridStepPlane) * gridStepPlane;
+    }
     // Create a visual representation of the particle
     const particleGeometry = new THREE.SphereGeometry(0.03 * this.selectedSize, 16, 16);
     const particleMaterial = new THREE.MeshBasicMaterial({color: this.selectedColor});