@sequent-org/ifc-viewer 1.0.3-ci.6.0 → 1.0.4-ci.8.0

package/README.md

@@ -43,7 +43,8 @@ function showIfcModal(ifcUrl) {
   
   const viewer = new IfcViewer({
     container: container,
-    ifcUrl: ifcUrl
+    ifcUrl: ifcUrl,
+    wasmUrl: '/storage/web-ifc.wasm'  // Путь к WASM в Laravel storage
     // Минимальный режим по умолчанию - только просмотрщик с верхней панелью
   })
   
@@ -53,6 +54,28 @@ function showIfcModal(ifcUrl) {
 }
 ```
 
+**Настройка WASM файла в Laravel:**
+
+1. Скопируйте `web-ifc.wasm` в папку `public/storage/`:
+```bash
+cp node_modules/web-ifc/web-ifc.wasm public/storage/
+```
+
+2. Или используйте символическую ссылку:
+```bash
+php artisan storage:link
+# Затем скопируйте файл в storage/app/public/
+```
+
+3. Альтернативно, укажите путь к файлу в `node_modules`:
+```javascript
+const viewer = new IfcViewer({
+  container: container,
+  ifcUrl: ifcUrl,
+  wasmUrl: '/node_modules/web-ifc/web-ifc.wasm'
+})
+```
+
 ### Загрузка пользовательского файла
 
 ```javascript
@@ -74,6 +97,18 @@ fileInput.addEventListener('change', async (e) => {
 })
 ```
 
+### Кастомный путь к WASM файлу
+
+```javascript
+const viewer = new IfcViewer({
+  container: '#viewer-container',
+  ifcUrl: '/models/building.ifc',
+  wasmUrl: '/custom-path/web-ifc.wasm'  // Указываем свой путь к WASM
+})
+
+await viewer.init()
+```
+
 ## ⚙️ Опции конфигурации
 
 | Опция | Тип | По умолчанию | Описание |
@@ -81,12 +116,52 @@ fileInput.addEventListener('change', async (e) => {
 | `container` | `HTMLElement \| string` | **обязательно** | DOM элемент или селектор для контейнера |
 | `ifcUrl` | `string` | `null` | URL для загрузки IFC файла |
 | `ifcFile` | `File` | `null` | File объект для загрузки |
+| `wasmUrl` | `string` | `null` | URL для загрузки WASM файла web-ifc |
 | `showSidebar` | `boolean` | `false` | Показывать боковую панель с деревом |
 | `showControls` | `boolean` | `false` | Показывать нижние кнопки управления |
 | `showToolbar` | `boolean` | `true` | Показывать верхнюю панель инструментов |
 | `autoLoad` | `boolean` | `true` | Автоматически загружать при инициализации |
 | `theme` | `string` | `'light'` | Тема интерфейса (`'light'` \| `'dark'`) |
 
+### 🔧 Подробное описание параметров
+
+#### `wasmUrl` - Настройка пути к WASM файлу
+
+Параметр `wasmUrl` позволяет указать кастомный путь к WASM файлу библиотеки `web-ifc`. Это особенно полезно при интеграции пакета в проекты с нестандартной структурой ресурсов.
+
+**Особенности:**
+- **По умолчанию**: Если не указан, используется автоматически определяемый путь из папки `public/wasm/`
+- **Поддержка форматов**: Полные URL (`https://example.com/web-ifc.wasm`) и относительные пути (`/assets/web-ifc.wasm`)
+- **Обратная совместимость**: При ошибке загрузки кастомного пути автоматически переключается на дефолтный
+- **Обработка ошибок**: В консоль выводится предупреждение при неудачной настройке кастомного пути
+
+**Примеры использования:**
+
+```javascript
+// Относительный путь
+const viewer1 = new IfcViewer({
+  container: '#viewer',
+  wasmUrl: '/assets/web-ifc.wasm'
+})
+
+// Полный URL
+const viewer2 = new IfcViewer({
+  container: '#viewer', 
+  wasmUrl: 'https://cdn.example.com/web-ifc.wasm'
+})
+
+// Путь с подпапкой
+const viewer3 = new IfcViewer({
+  container: '#viewer',
+  wasmUrl: '/static/libs/web-ifc.wasm'
+})
+```
+
+**Когда использовать:**
+- При размещении WASM файла в нестандартной папке
+- При использовании CDN для статических ресурсов
+- При интеграции в фреймворки с особой структурой ресурсов (Laravel, Next.js и т.д.)
+
 ## 🎯 API методы
 
 ### Основные методы
@@ -196,11 +271,56 @@ npm run test:manual
 - `.ifczip` - архивы IFC
 - `.zip` - ZIP архивы с IFC файлами
 
+## 🔧 Troubleshooting
+
+### Проблемы с WASM файлом
+
+**Ошибка загрузки WASM:**
+```
+Failed to load web-ifc.wasm
+```
+
+**Решения:**
+1. **Проверьте путь к файлу:**
+   ```javascript
+   // Убедитесь, что файл доступен по указанному пути
+   const viewer = new IfcViewer({
+     container: '#viewer',
+     wasmUrl: '/correct-path/web-ifc.wasm'
+   })
+   ```
+
+2. **Проверьте CORS настройки:**
+   - Для локальной разработки используйте относительные пути
+   - Для продакшена настройте CORS для WASM файлов
+
+3. **Проверьте MIME-тип:**
+   ```nginx
+   # В nginx.conf
+   location ~* \.wasm$ {
+       add_header Content-Type application/wasm;
+   }
+   ```
+
+4. **Альтернативные пути:**
+   ```javascript
+   // Попробуйте разные варианты
+   wasmUrl: '/web-ifc.wasm'           // корень
+   wasmUrl: '/assets/web-ifc.wasm'   // папка assets
+   wasmUrl: '/static/web-ifc.wasm'   // папка static
+   ```
+
+**Отладка:**
+- Откройте DevTools → Network и проверьте загрузку WASM файла
+- Проверьте консоль на предупреждения о `wasmUrl`
+- Убедитесь, что файл `web-ifc.wasm` существует и доступен
+
 ## 🔧 Системные требования
 
 - Node.js >= 16
-- Современный браузер с поддержкой WebGL
+- Современный браузер с поддержкой WebGL и WebAssembly
 - Для работы требуются файлы `web-ifc.wasm` в публичной папке проекта
+- Поддержка ES6 модулей в браузере
 
 ## 📄 Лицензия
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sequent-org/ifc-viewer",
   "private": false,
-  "version": "1.0.3-ci.6.0",
+  "version": "1.0.4-ci.8.0",
   "type": "module",
   "description": "IFC 3D model viewer component for web applications",
   "main": "src/index.js",

package/src/IfcViewer.js

@@ -21,6 +21,7 @@ export class IfcViewer {
    * @param {HTMLElement|string} options.container - Контейнер для рендера (элемент или селектор)
    * @param {string} [options.ifcUrl] - URL для загрузки IFC файла
    * @param {File} [options.ifcFile] - File объект для загрузки IFC файла
+   * @param {string} [options.wasmUrl] - URL для загрузки WASM файла web-ifc
    * @param {boolean} [options.showSidebar=false] - Показывать ли боковую панель с деревом
    * @param {boolean} [options.showControls=false] - Показывать ли панель управления (нижние кнопки)
    * @param {boolean} [options.showToolbar=true] - Показывать ли верхнюю панель инструментов
@@ -47,8 +48,9 @@ export class IfcViewer {
     this.options = {
       ifcUrl: options.ifcUrl || null,
       ifcFile: options.ifcFile || null,
+      wasmUrl: options.wasmUrl || null,
       showSidebar: options.showSidebar === true, // по умолчанию false
-      showControls: options.showControls === true, // по умолчанию false  
+      showControls: options.showControls === true, // по умолчанию false
       showToolbar: options.showToolbar !== false, // по умолчанию true
       autoLoad: options.autoLoad !== false,
       theme: options.theme || 'light',
@@ -430,7 +432,7 @@ export class IfcViewer {
       throw new Error('Viewer должен быть инициализирован перед IfcService');
     }
 
-    this.ifcService = new IfcService(this.viewer);
+    this.ifcService = new IfcService(this.viewer, this.options.wasmUrl);
     this.ifcService.init();
   }
 

package/src/ifc/IfcService.js

@@ -12,9 +12,11 @@ import IFCWorkerUrl from 'web-ifc-three/IFCWorker.js?url';
 export class IfcService {
   /**
    * @param {import('../viewer/Viewer').Viewer} viewer
+   * @param {string} [wasmUrl] - URL для загрузки WASM файла web-ifc
    */
-  constructor(viewer) {
+  constructor(viewer, wasmUrl = null) {
     this.viewer = viewer;
+    this.wasmUrl = wasmUrl;
     this.loader = null;
     this.lastModel = null; // THREE.Object3D модели IFC
     this.lastFileName = null;
@@ -24,30 +26,115 @@ export class IfcService {
   }
 
   init() {
-    this.loader = new IFCLoader();
-    // Отключаем Web Worker: временно парсим в главном потоке для стабильности
-    try { this.loader.ifcManager.useWebWorkers?.(false); } catch(_) {}
-    // Путь к wasm файлу (скопируйте web-ifc.wasm в public/wasm)
     try {
-      // Преобразуем URL файла wasm в URL каталога и передадим в воркер
-      const wasmDir = new URL('.', WEBIFC_WASM_URL).href;
-      this.loader.ifcManager.setWasmPath(wasmDir);
-      // Дополнительно подстрахуемся передачей полного файла, если версия это поддерживает
-      try { this.loader.ifcManager.setWasmPath(WEBIFC_WASM_URL); } catch(_) {}
-    } catch (_) {
-      this.loader.ifcManager.setWasmPath('/wasm/');
+      this.loader = new IFCLoader();
+      // Отключаем Web Worker: временно парсим в главном потоке для стабильности
+      try { this.loader.ifcManager.useWebWorkers?.(false); } catch(_) {}
+      
+      // Настройка пути к WASM файлу с улучшенной обработкой ошибок
+      this._setupWasmPath();
+      
+      // Настройка конфигурации web-ifc
+      this._setupWebIfcConfig();
+      
+    } catch (error) {
+      console.error('IfcService: критическая ошибка инициализации:', error);
+      this._handleCriticalError(error);
+    }
+  }
+
+  /**
+   * Настройка пути к WASM файлу с fallback
+   * @private
+   */
+  _setupWasmPath() {
+    const wasmPaths = this._getWasmPaths();
+    
+    for (let i = 0; i < wasmPaths.length; i++) {
+      try {
+        this.loader.ifcManager.setWasmPath(wasmPaths[i]);
+        console.log(`IfcService: WASM путь установлен: ${wasmPaths[i]}`);
+        return; // Успешно установлен
+      } catch (error) {
+        console.warn(`IfcService: не удалось установить WASM путь ${wasmPaths[i]}:`, error.message);
+        if (i === wasmPaths.length - 1) {
+          // Последний путь тоже не сработал
+          throw new Error('Все пути к WASM файлу недоступны');
+        }
+      }
     }
+  }
+
+  /**
+   * Получает список путей к WASM файлу в порядке приоритета
+   * @private
+   */
+  _getWasmPaths() {
+    const paths = [];
+    
+    // 1. Пользовательский путь (если указан)
+    if (this.wasmUrl) {
+      paths.push(this.wasmUrl);
+    }
+    
+    // 2. Пути по умолчанию
+    try {
+      const wasmDir = new URL('.', WEBIFC_WASM_URL).href;
+      paths.push(wasmDir);
+    } catch (_) {}
+    
+    try {
+      paths.push(WEBIFC_WASM_URL);
+    } catch (_) {}
+    
+    // 3. Резервные пути
+    paths.push('/wasm/', '/wasm/web-ifc.wasm', '/web-ifc.wasm');
+    
+    return paths;
+  }
+
+  /**
+   * Настройка конфигурации web-ifc
+   * @private
+   */
+  _setupWebIfcConfig() {
     try {
       this.loader.ifcManager.applyWebIfcConfig?.({
         COORDINATE_TO_ORIGIN: true,
         USE_FAST_BOOLS: true,
         // Порог игнорирования очень мелких полигонов (уменьшаем шум)
-        // Некоторые сборки поддерживают SMALL_TRIANGLE_THRESHOLD
         SMALL_TRIANGLE_THRESHOLD: 1e-9,
       });
-    } catch(_) {}
+    } catch (error) {
+      console.warn('IfcService: не удалось применить конфигурацию web-ifc:', error.message);
+    }
+  }
+
+  /**
+   * Обработка критических ошибок инициализации
+   * @private
+   */
+  _handleCriticalError(error) {
+    // Создаем заглушку для loader, чтобы избежать падения
+    this.loader = {
+      ifcManager: {
+        setWasmPath: () => {},
+        applyWebIfcConfig: () => {},
+        useWebWorkers: () => {},
+        load: () => Promise.reject(new Error('WASM не инициализирован'))
+      }
+    };
+    
+    // Уведомляем о критической ошибке
+    this.viewer?.container?.dispatchEvent(new CustomEvent('ifcviewer:error', {
+      detail: { 
+        error: new Error('Критическая ошибка инициализации WASM: ' + error.message),
+        type: 'wasm_init_error'
+      }
+    }));
   }
 
+
   /**
    * Возвращает пространственную структуру IFC (иерархия) для активной модели
    * Структура: { expressID, type, children: [...] }
@@ -119,33 +206,36 @@ export class IfcService {
    * @param {File} file
    */
   async loadFile(file) {
-    if (!this.loader) this.init();
-    // Проверка расширения: поддерживаются .ifc и .ifczip
-    const name = (file?.name || "").toLowerCase();
-    const isIFC = name.endsWith(".ifc");
-    const isIFS = name.endsWith(".ifs");
-    const isZIP = name.endsWith(".ifczip") || name.endsWith(".zip");
-    if (!isIFC && !isIFS && !isZIP) {
-      alert("Формат не поддерживается. Используйте .ifc, .ifs или .ifczip");
-      return null;
-    }
-    const url = URL.createObjectURL(file);
     try {
-      const model = await this.loader.loadAsync(url);
-      // Показать модель вместо демо-куба
-      if (this.viewer.replaceWithModel) this.viewer.replaceWithModel(model);
-      if (this.viewer.focusObject) this.viewer.focusObject(model);
-      this.lastModel = model;
-      this.lastFileName = file?.name || null;
-      // Сообщим, что модель загружена
-      try { document.dispatchEvent(new CustomEvent('ifc:model-loaded', { detail: { modelID: model.modelID } })); } catch(_) {}
-      return model;
+      if (!this.loader) this.init();
+      
+      // Проверка расширения: поддерживаются .ifc и .ifczip
+      const name = (file?.name || "").toLowerCase();
+      const isIFC = name.endsWith(".ifc");
+      const isIFS = name.endsWith(".ifs");
+      const isZIP = name.endsWith(".ifczip") || name.endsWith(".zip");
+      if (!isIFC && !isIFS && !isZIP) {
+        throw new Error("Формат не поддерживается. Используйте .ifc, .ifs или .ifczip");
+      }
+      
+      const url = URL.createObjectURL(file);
+      try {
+        const model = await this._loadModelWithFallback(url);
+        // Показать модель вместо демо-куба
+        if (this.viewer.replaceWithModel) this.viewer.replaceWithModel(model);
+        if (this.viewer.focusObject) this.viewer.focusObject(model);
+        this.lastModel = model;
+        this.lastFileName = file?.name || null;
+        // Сообщим, что модель загружена
+        this._dispatchModelLoaded(model);
+        return model;
+      } finally {
+        URL.revokeObjectURL(url);
+      }
     } catch (err) {
       console.error("IFC load error:", err);
-      alert("Ошибка загрузки IFC: " + (err?.message || err));
+      this._handleLoadError(err, 'loadFile');
       return null;
-    } finally {
-      URL.revokeObjectURL(url);
     }
   }
 
@@ -154,15 +244,17 @@ export class IfcService {
    * @param {string} url
    */
   async loadUrl(url) {
-    if (!this.loader) this.init();
-    if (!url) return null;
     try {
-      // Защитим загрузку: перехватим возможные исключения на уровне воркера
-      const model = await this.loader.loadAsync(url);
+      if (!this.loader) this.init();
+      if (!url) return null;
+      
+      const model = await this._loadModelWithFallback(url);
       if (!model || !model.geometry) throw new Error('IFC model returned without geometry');
+      
       if (this.viewer.replaceWithModel) this.viewer.replaceWithModel(model);
       if (this.viewer.focusObject) this.viewer.focusObject(model);
       this.lastModel = model;
+      
       try {
         // Показать имя файла из URL
         const u = new URL(url, window.location.origin);
@@ -170,12 +262,13 @@ export class IfcService {
       } catch (_) {
         this.lastFileName = url;
       }
+      
       // Сообщим, что модель загружена
-      try { document.dispatchEvent(new CustomEvent('ifc:model-loaded', { detail: { modelID: model.modelID } })); } catch(_) {}
+      this._dispatchModelLoaded(model);
       return model;
     } catch (err) {
       console.error("IFC loadUrl error:", err);
-      alert("Ошибка загрузки IFC по URL: " + (err?.message || err));
+      this._handleLoadError(err, 'loadUrl');
       return null;
     }
   }
@@ -263,6 +356,108 @@ export class IfcService {
       this.lastModel.visible = true;
     }
   }
+
+  /**
+   * Загружает модель с fallback обработкой ошибок WASM
+   * @private
+   */
+  async _loadModelWithFallback(url) {
+    try {
+      return await this.loader.loadAsync(url);
+    } catch (error) {
+      // Проверяем, связана ли ошибка с WASM
+      if (this._isWasmError(error)) {
+        console.warn('IfcService: обнаружена ошибка WASM, пытаемся переинициализировать...');
+        await this._reinitializeWithFallback();
+        // Повторная попытка загрузки
+        return await this.loader.loadAsync(url);
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Проверяет, связана ли ошибка с WASM
+   * @private
+   */
+  _isWasmError(error) {
+    const message = error?.message?.toLowerCase() || '';
+    return message.includes('wasm') || 
+           message.includes('webassembly') ||
+           message.includes('module') ||
+           message.includes('instantiate');
+  }
+
+  /**
+   * Переинициализирует loader с fallback путями
+   * @private
+   */
+  async _reinitializeWithFallback() {
+    try {
+      // Попробуем переинициализировать с другими путями
+      this.loader = new IFCLoader();
+      this._setupWasmPath();
+      this._setupWebIfcConfig();
+    } catch (error) {
+      console.error('IfcService: не удалось переинициализировать:', error);
+      throw new Error('Критическая ошибка WASM: невозможно загрузить модель');
+    }
+  }
+
+  /**
+   * Отправляет событие о загрузке модели
+   * @private
+   */
+  _dispatchModelLoaded(model) {
+    try {
+      document.dispatchEvent(new CustomEvent('ifc:model-loaded', { 
+        detail: { modelID: model.modelID } 
+      }));
+    } catch (_) {}
+  }
+
+  /**
+   * Обрабатывает ошибки загрузки
+   * @private
+   */
+  _handleLoadError(error, method) {
+    const errorMessage = `Ошибка загрузки IFC (${method}): ${error?.message || error}`;
+    
+    // Отправляем событие об ошибке
+    this.viewer?.container?.dispatchEvent(new CustomEvent('ifcviewer:error', {
+      detail: { 
+        error: new Error(errorMessage),
+        type: 'load_error',
+        method: method
+      }
+    }));
+    
+    // Показываем пользователю понятное сообщение
+    const userMessage = this._getUserFriendlyMessage(error);
+    alert(userMessage);
+  }
+
+  /**
+   * Возвращает понятное пользователю сообщение об ошибке
+   * @private
+   */
+  _getUserFriendlyMessage(error) {
+    const message = error?.message?.toLowerCase() || '';
+    
+    if (message.includes('wasm') || message.includes('webassembly')) {
+      return 'Ошибка загрузки WASM модуля. Проверьте доступность файла web-ifc.wasm';
+    }
+    
+    if (message.includes('network') || message.includes('fetch')) {
+      return 'Ошибка сети при загрузке файла. Проверьте подключение к интернету';
+    }
+    
+    if (message.includes('format') || message.includes('parse')) {
+      return 'Ошибка формата файла. Убедитесь, что файл является корректным IFC файлом';
+    }
+    
+    return `Ошибка загрузки модели: ${error?.message || 'Неизвестная ошибка'}`;
+  }
 }