feat: Add 3D viewer controls to Pattern Editor (#29)

Port view controls, FOV, zoom, screenshot, and arena statistics from
the standalone 3D viewer into the Pattern Editor's 3D tab.

- 10 view presets: 6 external (top/bottom/N/E/S/W) + 4 fly views
- FOV slider (30-120°) with Normal (60°) and Wide (120°) presets
- Zoom +/- buttons for camera distance control
- Screenshot button (downloads PNG of 3D panel only)
- Collapsible arena stats overlay (radius, height, LEDs, resolution)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: mbreiser

js/pattern-editor/viewers/three-viewer.js

@@ -254,6 +254,164 @@ class ThreeViewer {
         return this.renderer.domElement.toDataURL('image/png');
     }
 
+    /**
+     * Set camera to a named view preset
+     * External views: camera outside arena looking in (like cube faces)
+     * Internal views: camera at arena center looking out toward display
+     * @param {string} preset - View preset name
+     */
+    setViewPreset(preset) {
+        if (!this.arenaConfig || !this.panelSpecs) return;
+
+        const arena = this.arenaConfig.arena;
+        const panelWidth = this.panelSpecs.panel_width_mm / 25.4;
+        const alpha = (2 * Math.PI) / arena.num_cols;
+        const cRadius = panelWidth / (Math.tan(alpha / 2)) / 2;
+        const viewDistance = cRadius * 3;
+        const midlineY = 0;
+
+        switch (preset) {
+            // External views (camera outside, looking in)
+            case 'top-down':
+                this.camera.position.set(0, viewDistance, 0.01);
+                this.controls.target.set(0, midlineY, 0);
+                break;
+            case 'bottom-up':
+                this.camera.position.set(0, -viewDistance, 0.01);
+                this.controls.target.set(0, midlineY, 0);
+                break;
+            case 'from-north':
+                this.camera.position.set(0, midlineY, -viewDistance);
+                this.controls.target.set(0, midlineY, 0);
+                break;
+            case 'from-east':
+                this.camera.position.set(viewDistance, midlineY, 0);
+                this.controls.target.set(0, midlineY, 0);
+                break;
+            case 'from-south':
+                this.camera.position.set(0, midlineY, viewDistance);
+                this.controls.target.set(0, midlineY, 0);
+                break;
+            case 'from-west':
+                this.camera.position.set(-viewDistance, midlineY, 0);
+                this.controls.target.set(0, midlineY, 0);
+                break;
+
+            // Internal views (camera at center, looking outward)
+            case 'fly-north':
+                this.camera.position.set(0, midlineY, 0);
+                this.controls.target.set(0, midlineY, -cRadius);
+                break;
+            case 'fly-east':
+                this.camera.position.set(0, midlineY, 0);
+                this.controls.target.set(cRadius, midlineY, 0);
+                break;
+            case 'fly-south':
+                this.camera.position.set(0, midlineY, 0);
+                this.controls.target.set(0, midlineY, cRadius);
+                break;
+            case 'fly-west':
+                this.camera.position.set(0, midlineY, 0);
+                this.controls.target.set(-cRadius, midlineY, 0);
+                break;
+        }
+        this.controls.update();
+    }
+
+    /**
+     * Set camera field of view
+     * @param {number} fov - FOV in degrees (30-120)
+     * @param {boolean} compensateDistance - Adjust camera distance to maintain apparent size
+     */
+    setFOV(fov, compensateDistance = false) {
+        const oldFOV = this.camera.fov;
+        this.camera.fov = fov;
+        this.camera.updateProjectionMatrix();
+
+        if (compensateDistance && oldFOV !== fov) {
+            const oldTan = Math.tan((oldFOV / 2) * Math.PI / 180);
+            const newTan = Math.tan((fov / 2) * Math.PI / 180);
+            const scale = oldTan / newTan;
+
+            const direction = new THREE.Vector3();
+            direction.subVectors(this.camera.position, this.controls.target);
+            direction.multiplyScalar(scale);
+            this.camera.position.copy(this.controls.target).add(direction);
+            this.controls.update();
+        }
+    }
+
+    /**
+     * Zoom in by moving camera closer to target
+     */
+    zoomIn() {
+        const direction = new THREE.Vector3();
+        direction.subVectors(this.camera.position, this.controls.target);
+        direction.multiplyScalar(0.8);
+        this.camera.position.copy(this.controls.target).add(direction);
+        this.controls.update();
+    }
+
+    /**
+     * Zoom out by moving camera farther from target
+     */
+    zoomOut() {
+        const direction = new THREE.Vector3();
+        direction.subVectors(this.camera.position, this.controls.target);
+        direction.multiplyScalar(1.25);
+        this.camera.position.copy(this.controls.target).add(direction);
+        this.controls.update();
+    }
+
+    /**
+     * Get arena statistics for display
+     * @returns {Object|null} Stats object or null if no arena config
+     */
+    getArenaStats() {
+        if (!this.arenaConfig || !this.panelSpecs) return null;
+
+        const arena = this.arenaConfig.arena;
+        const specs = this.panelSpecs;
+        const numCols = arena.num_cols;
+        const numRows = arena.num_rows;
+
+        const panelWidth = specs.panel_width_mm / 25.4;
+        const panelHeight = specs.panel_height_mm / 25.4;
+        const alpha = (2 * Math.PI) / numCols;
+        const cRadius = panelWidth / (Math.tan(alpha / 2)) / 2;
+        const arenaHeight = panelHeight * numRows;
+
+        // Installed columns (for partial arenas)
+        const installedCols = arena.columns_installed
+            ? arena.columns_installed.length
+            : numCols;
+        const totalPanels = installedCols * numRows;
+        const totalLEDs = totalPanels * specs.pixels_per_panel * specs.pixels_per_panel;
+
+        const azimuthPixels = numCols * specs.pixels_per_panel;
+        const verticalPixels = numRows * specs.pixels_per_panel;
+        const azimuthRes = 360 / azimuthPixels;
+
+        const halfAngleRad = Math.atan((arenaHeight / 2) / cRadius);
+        const totalVerticalDegrees = 2 * halfAngleRad * (180 / Math.PI);
+        const verticalRes = totalVerticalDegrees / verticalPixels;
+
+        const radiusMM = cRadius * 25.4;
+        const heightMM = arenaHeight * 25.4;
+
+        return {
+            columns: installedCols,
+            totalPanels,
+            innerRadius: radiusMM,
+            arenaHeight: heightMM,
+            totalLEDs,
+            azimuthRes,
+            verticalRes,
+            azimuthPixels,
+            verticalPixels
+        };
+    }
+
     /**
      * Clean up and destroy the viewer
      */