cyclecad 1.3.2 → 1.3.3

package/app/js/modules/step-module.js

@@ -0,0 +1,510 @@
+/**
+ * STEP Module - Import/Export AP203/AP214 STEP files
+ * Microkernel LEGO block for cycleCAD
+ *
+ * Dual-path architecture:
+ * 1. Browser WASM (occt-import-js) for files < 50MB
+ * 2. Server-side converter (Python/CadQuery) for files >= 50MB
+ * 3. B-Rep kernel (if available) for native STEP I/O
+ */
+
+const StepModule = {
+  id: 'step-io',
+  name: 'STEP Import/Export',
+  version: '1.0.0',
+  category: 'data',
+  dependencies: ['viewport'],
+  memoryEstimate: 60, // OpenCascade.js WASM ~50MB
+
+  // ========== MODULE STATE ==========
+  state: {
+    importInProgress: false,
+    workerReady: false,
+    serverURL: 'http://localhost:8787/convert',
+    useBrepKernel: false,
+    lastImportInfo: null,
+  },
+
+  kernel: null,
+  worker: null,
+  workerHeartbeat: null,
+
+  // ========== INITIALIZATION ==========
+  async init(kernel) {
+    this.kernel = kernel;
+    this.state.serverURL = localStorage.getItem('ev_converter_url') || 'http://localhost:8787/convert';
+
+    // Check if brep-kernel is available
+    const brepModule = kernel.modules?.find(m => m.id === 'brep-kernel');
+    this.state.useBrepKernel = !!brepModule;
+
+    // Initialize Web Worker for WASM parsing
+    this.initWorker();
+
+    // Register commands with kernel
+    kernel.registerCommand('step.import', (file) => this.import(file));
+    kernel.registerCommand('step.export', (filename) => this.export(filename));
+    kernel.registerCommand('step.importFromURL', (url) => this.importFromURL(url));
+    kernel.registerCommand('step.getMetadata', (file) => this.getMetadata(file));
+    kernel.registerCommand('step.setServerURL', (url) => this.setServerURL(url));
+
+    console.log('[StepModule] Initialized', {
+      serverURL: this.state.serverURL,
+      useBrepKernel: this.state.useBrepKernel,
+    });
+  },
+
+  // ========== WORKER SETUP ==========
+  initWorker() {
+    const workerCode = `
+      let occtImport = null;
+      let heartbeat = null;
+
+      // Load occt-import-js via importScripts
+      importScripts('https://cdn.jsdelivr.net/npm/occt-import-js@0.0.23/dist/occt-import-js.umd.js');
+
+      // Initialize WASM
+      (async () => {
+        try {
+          occtImport = await window.occtImportJs({
+            locateFile: (p) => 'https://cdn.jsdelivr.net/npm/occt-import-js@0.0.23/dist/' + p
+          });
+          postMessage({ type: 'ready' });
+        } catch (e) {
+          postMessage({ type: 'error', error: 'Failed to load WASM: ' + e.message });
+        }
+      })();
+
+      self.onmessage = async (e) => {
+        const { type, data } = e.data;
+
+        if (type === 'parse') {
+          try {
+            // Clear old heartbeat
+            if (heartbeat) clearInterval(heartbeat);
+
+            // Send heartbeat every 5s
+            heartbeat = setInterval(() => {
+              postMessage({ type: 'heartbeat' });
+            }, 5000);
+
+            const startTime = performance.now();
+            const result = occtImport.ReadStepFile(data.buffer, data.deflection || 0.01);
+            const parseTime = performance.now() - startTime;
+
+            if (!result || !result.meshes || result.meshes.length === 0) {
+              postMessage({
+                type: 'error',
+                error: 'No meshes extracted from STEP file'
+              });
+              return;
+            }
+
+            // Copy mesh data from WASM heap (avoid view invalidation)
+            const meshes = [];
+            for (let i = 0; i < result.meshes.length; i++) {
+              const m = result.meshes[i];
+              if (!m.attributes || !m.attributes.position) continue;
+
+              const posArray = m.attributes.position.array;
+              const normArray = m.attributes.normal?.array || null;
+              const colorArray = m.attributes.color?.array || null;
+              const indexArray = m.index?.array || null;
+
+              // Tight copy loop to prevent WASM heap reallocation issues
+              meshes.push({
+                name: m.name || 'Part_' + i,
+                position: new Float32Array(posArray.slice ? posArray.slice(0) : Array.from(posArray)),
+                normal: normArray ? new Float32Array(normArray.slice ? normArray.slice(0) : Array.from(normArray)) : null,
+                color: colorArray ? new Uint8Array(colorArray.slice ? colorArray.slice(0) : Array.from(colorArray)) : null,
+                index: indexArray ? new Uint32Array(indexArray.slice ? indexArray.slice(0) : Array.from(indexArray)) : null,
+              });
+            }
+
+            clearInterval(heartbeat);
+            postMessage({
+              type: 'complete',
+              data: {
+                meshes,
+                parseTime,
+                partCount: result.meshes.length,
+              }
+            }, meshes.map(m => m.position.buffer).filter(b => b));
+
+          } catch (e) {
+            clearInterval(heartbeat);
+            postMessage({
+              type: 'error',
+              error: 'WASM parse failed: ' + e.message
+            });
+          }
+        }
+      };
+    `;
+
+    const blob = new Blob([workerCode], { type: 'application/javascript' });
+    const workerURL = URL.createObjectURL(blob);
+    this.worker = new Worker(workerURL);
+
+    this.worker.onmessage = (e) => {
+      const { type, data, error } = e.data;
+      if (type === 'ready') {
+        this.state.workerReady = true;
+        console.log('[StepModule] Worker ready');
+      } else if (type === 'heartbeat') {
+        // Worker is alive, reset timeout
+        if (this.workerHeartbeat) clearTimeout(this.workerHeartbeat);
+      }
+    };
+  },
+
+  // ========== IMPORT ==========
+  async import(file) {
+    if (!(file instanceof File) && !(file instanceof Blob)) {
+      this.emit('step:importError', { error: 'Invalid file type', suggestion: 'Pass a File or Blob object' });
+      return;
+    }
+
+    const filename = file.name || 'model.step';
+    const fileSize = file.size;
+    this.state.importInProgress = true;
+
+    // File size check
+    if (fileSize > 100 * 1024 * 1024) { // 100MB
+      const confirm = window.confirm(
+        `This STEP file is ${(fileSize / 1024 / 1024).toFixed(1)}MB. Large files may freeze the browser.\n\n` +
+        `Recommended: Use server-side converter or split the assembly.\n\n` +
+        `Continue anyway?`
+      );
+      if (!confirm) {
+        this.state.importInProgress = false;
+        return;
+      }
+    }
+
+    this.emit('step:importStart', { filename, size: fileSize });
+
+    try {
+      let meshes;
+
+      // Route: >= 50MB or WASM unavailable → server
+      if (fileSize >= 50 * 1024 * 1024 || !this.state.workerReady) {
+        console.log('[StepModule] Using server-side converter');
+        meshes = await this.importViaServer(file);
+      } else {
+        // Route: < 50MB → WASM Worker
+        console.log('[StepModule] Using browser WASM');
+        meshes = await this.importViaWASM(file);
+      }
+
+      // Create Three.js objects and add to scene
+      const partCount = await this.createMeshesInScene(meshes, filename);
+
+      this.state.lastImportInfo = { partCount, filename, timestamp: Date.now() };
+      this.state.importInProgress = false;
+
+      this.emit('step:importComplete', {
+        partCount,
+        duration: Date.now() - this.state.lastImportInfo.timestamp,
+      });
+
+    } catch (e) {
+      this.state.importInProgress = false;
+      console.error('[StepModule] Import failed:', e);
+
+      let suggestion = 'Check file format and try again.';
+      if (e.message.includes('WASM') || e.message.includes('memory')) {
+        suggestion = 'File too large for browser. Try server converter or split assembly.';
+      }
+
+      this.emit('step:importError', { error: e.message, suggestion });
+    }
+  },
+
+  async importViaWASM(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+
+      reader.onload = async (e) => {
+        const buffer = e.target.result;
+        const deflection = file.size > 50 * 1024 * 1024 ? 0.05 : 0.01; // Coarser for large files
+
+        // Set 90s timeout
+        const timeout = setTimeout(() => {
+          this.worker.terminate();
+          this.initWorker(); // Restart worker
+          reject(new Error('WASM parsing timeout (90s). File too complex for browser.'));
+        }, 90000);
+
+        this.worker.onmessage = (e) => {
+          const { type, data, error } = e.data;
+
+          if (type === 'complete') {
+            clearTimeout(timeout);
+            resolve(data.meshes);
+          } else if (type === 'error') {
+            clearTimeout(timeout);
+            reject(new Error(error));
+          }
+        };
+
+        this.worker.postMessage({ type: 'parse', data: { buffer, deflection } });
+      };
+
+      reader.onerror = () => reject(new Error('File read failed'));
+      reader.readAsArrayBuffer(file);
+    });
+  },
+
+  async importViaServer(file) {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const response = await fetch(this.state.serverURL, {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!response.ok) {
+        throw new Error(`Server error: ${response.status}`);
+      }
+
+      const glbBuffer = await response.arrayBuffer();
+
+      // Load GLB with Three.js GLTFLoader
+      const loader = new THREE.GLTFLoader();
+      return new Promise((resolve, reject) => {
+        loader.parse(glbBuffer, '', (gltf) => {
+          // Extract meshes from GLTF
+          const meshes = [];
+          gltf.scene.traverse((node) => {
+            if (node.isMesh && node.geometry) {
+              const pos = node.geometry.attributes.position;
+              const norm = node.geometry.attributes.normal;
+              const indices = node.geometry.index;
+
+              meshes.push({
+                name: node.name || 'Part',
+                position: pos.array,
+                normal: norm ? norm.array : null,
+                color: node.geometry.attributes.color?.array || null,
+                index: indices ? indices.array : null,
+              });
+            }
+          });
+          resolve(meshes);
+        }, reject);
+      });
+    } catch (e) {
+      throw new Error(`Server import failed: ${e.message}`);
+    }
+  },
+
+  async createMeshesInScene(meshes, filename) {
+    let partCount = 0;
+
+    for (const meshData of meshes) {
+      const geometry = new THREE.BufferGeometry();
+
+      geometry.setAttribute('position', new THREE.BufferAttribute(meshData.position, 3));
+      if (meshData.normal) {
+        geometry.setAttribute('normal', new THREE.BufferAttribute(meshData.normal, 3));
+      } else {
+        geometry.computeVertexNormals();
+      }
+
+      if (meshData.index) {
+        geometry.setIndex(new THREE.BufferAttribute(meshData.index, 1));
+      }
+
+      const material = new THREE.MeshStandardMaterial({
+        color: 0xcccccc,
+        metalness: 0.3,
+        roughness: 0.7,
+      });
+
+      const mesh = new THREE.Mesh(geometry, material);
+      mesh.name = meshData.name;
+      mesh.userData = {
+        partIndex: partCount,
+        source: 'step-import',
+        filename,
+      };
+
+      // Add to scene via kernel
+      this.kernel.exec('viewport.addMesh', { mesh, name: meshData.name });
+
+      partCount++;
+    }
+
+    return partCount;
+  },
+
+  // ========== IMPORT FROM URL ==========
+  async importFromURL(url) {
+    try {
+      this.emit('step:importStart', { filename: url.split('/').pop(), size: 0 });
+      const response = await fetch(url);
+      const blob = await response.blob();
+      const file = new File([blob], url.split('/').pop(), { type: 'application/octet-stream' });
+      return this.import(file);
+    } catch (e) {
+      this.emit('step:importError', { error: e.message, suggestion: 'Check URL and try again.' });
+    }
+  },
+
+  // ========== EXPORT ==========
+  async export(filename = 'model.step') {
+    if (!this.state.useBrepKernel) {
+      this.emit('step:exportError', { error: 'B-Rep kernel not available', suggestion: 'Load brep-kernel module first.' });
+      return;
+    }
+
+    try {
+      // Get all shapes from scene via kernel
+      const shapes = this.kernel.exec('viewport.getAllShapes');
+      if (!shapes || shapes.length === 0) {
+        throw new Error('No shapes in scene to export');
+      }
+
+      // Use brep-kernel to export
+      const brepModule = this.kernel.modules.find(m => m.id === 'brep-kernel');
+      const stepBuffer = brepModule.exec('exportSTEP', { shapes });
+
+      // Download
+      const blob = new Blob([stepBuffer], { type: 'application/octet-stream' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      this.emit('step:exportComplete', { filename, size: stepBuffer.byteLength });
+    } catch (e) {
+      console.error('[StepModule] Export failed:', e);
+      this.emit('step:exportError', { error: e.message });
+    }
+  },
+
+  // ========== METADATA ==========
+  async getMetadata(file) {
+    // Quick parse to get part names without full geometry
+    // Uses WASM but only reads metadata
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        // Simplified: count PART entities in ASCII STEP
+        const text = new TextDecoder().decode(reader.result.slice(0, 100000));
+        const partCount = (text.match(/^PART\(/gm) || []).length;
+        resolve({ partCount, filename: file.name });
+      };
+      reader.readAsArrayBuffer(file);
+    });
+  },
+
+  // ========== CONFIGURATION ==========
+  setServerURL(url) {
+    this.state.serverURL = url;
+    localStorage.setItem('ev_converter_url', url);
+    console.log('[StepModule] Server URL updated:', url);
+  },
+
+  // ========== UI ==========
+  getUI() {
+    const container = document.createElement('div');
+    container.id = 'step-panel';
+    container.style.cssText = `
+      position: relative;
+      padding: 16px;
+      background: #1e1e1e;
+      border-radius: 8px;
+      color: #e0e0e0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    `;
+
+    container.innerHTML = `
+      <div style="margin-bottom: 12px;">
+        <h3 style="margin: 0 0 8px 0; font-size: 14px; color: #fff;">STEP Import/Export</h3>
+        <p style="margin: 0; font-size: 12px; color: #999;">AP203/AP214 STEP files</p>
+      </div>
+
+      <div style="display: flex; gap: 8px; margin-bottom: 12px;">
+        <button id="step-import-btn" style="flex: 1; padding: 8px; background: #0284c7; border: none; border-radius: 4px; color: #fff; cursor: pointer; font-size: 12px;">
+          Import STEP
+        </button>
+        <button id="step-export-btn" style="flex: 1; padding: 8px; background: #6b7280; border: none; border-radius: 4px; color: #fff; cursor: pointer; font-size: 12px;" ${!this.state.useBrepKernel ? 'disabled' : ''}>
+          Export STEP
+        </button>
+      </div>
+
+      <div id="step-progress" style="display: none; margin-bottom: 12px;">
+        <div style="height: 4px; background: #333; border-radius: 2px; overflow: hidden;">
+          <div id="step-progress-bar" style="height: 100%; background: #0284c7; width: 0%; transition: width 0.2s;"></div>
+        </div>
+        <div style="font-size: 11px; color: #999; margin-top: 4px;" id="step-progress-text">Importing...</div>
+      </div>
+
+      <div style="margin-bottom: 12px;">
+        <label style="display: block; font-size: 11px; color: #999; margin-bottom: 4px;">Server URL</label>
+        <input id="step-server-url" type="text" value="${this.state.serverURL}" style="width: 100%; padding: 4px; background: #333; border: 1px solid #444; border-radius: 4px; color: #e0e0e0; font-size: 11px; box-sizing: border-box;">
+      </div>
+
+      <div style="font-size: 11px; color: #666; line-height: 1.4;">
+        <strong>Import:</strong> Files <50MB use browser WASM, ≥50MB use server<br>
+        <strong>Export:</strong> Requires B-Rep kernel module
+      </div>
+    `;
+
+    container.addEventListener('click', (e) => {
+      if (e.target.id === 'step-import-btn') {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.step,.stp';
+        input.onchange = (e) => {
+          if (e.target.files[0]) {
+            this.import(e.target.files[0]);
+          }
+        };
+        input.click();
+      } else if (e.target.id === 'step-export-btn') {
+        this.export('model.step');
+      }
+    });
+
+    container.addEventListener('change', (e) => {
+      if (e.target.id === 'step-server-url') {
+        this.setServerURL(e.target.value);
+      }
+    });
+
+    // Listen to events
+    this.kernel.on('step:importProgress', (data) => {
+      const progress = container.querySelector('#step-progress');
+      progress.style.display = 'block';
+      container.querySelector('#step-progress-bar').style.width = (data.percent || 0) + '%';
+      container.querySelector('#step-progress-text').textContent = data.message || 'Importing...';
+    });
+
+    this.kernel.on('step:importComplete', () => {
+      setTimeout(() => {
+        container.querySelector('#step-progress').style.display = 'none';
+      }, 500);
+    });
+
+    return container;
+  },
+
+  // ========== EVENT EMISSION ==========
+  emit(eventName, data) {
+    if (this.kernel && this.kernel.emit) {
+      this.kernel.emit(eventName, data);
+    }
+    console.log(`[StepModule] ${eventName}`, data);
+  },
+};
+
+export default StepModule;