@sequent-org/ifc-viewer 1.2.4-ci.24.0 → 1.2.4-ci.26.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sequent-org/ifc-viewer",
   "private": false,
-  "version": "1.2.4-ci.24.0",
+  "version": "1.2.4-ci.26.0",
   "type": "module",
   "description": "IFC 3D model viewer component for web applications - fully self-contained with local IFCLoader",
   "main": "src/index.js",

package/src/IfcViewer.js

@@ -13,18 +13,8 @@
 import { Viewer } from "./viewer/Viewer.js";
 import { IfcService } from "./ifc/IfcService.js";
 import { IfcTreeView } from "./ifc/IfcTreeView.js";
+import './style.css';
 
-// Загружаем стили при импорте IfcViewer
-if (typeof window !== 'undefined' && !document.querySelector('style[data-ifc-viewer]')) {
-  import('./style.css').then(() => {
-    // Добавляем маркер, что стили загружены
-    const style = document.createElement('style');
-    style.setAttribute('data-ifc-viewer', 'loaded');
-    document.head.appendChild(style);
-  }).catch(error => {
-    console.warn('IfcViewer: не удалось загрузить стили:', error.message);
-  });
-}
 
 export class IfcViewer {
   /**
@@ -302,7 +292,7 @@ export class IfcViewer {
         </div>
 
         <!-- Верхняя панель управления -->
-        <div id="ifcToolbar" class="d-flex px-4" style="border:0px red solid; width: 250px; position: absolute; z-index: 1000; justify-content:space-between;  bottom: 10px; left: calc(50% - 125px); ">
+        <div id="ifcToolbar" class="d-flex px-4" style="border:0px red solid; width: 250px; position: absolute; z-index: 60; justify-content:space-between;  bottom: 10px; left: calc(50% - 125px); ">
           
           <div class="navbar-end flex gap-2">                   
             
@@ -315,7 +305,7 @@ export class IfcViewer {
             <div class="join">
               <button class="btn btn-sm join-item" id="ifcClipX" style="margin-right:2px"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.6 3v9.07l3.87-1.72a2 2 0 01.81-.17 2.08 2.08 0 011.77 3.09 1.09 1.09 0 01-.56.56l-4.36 1.94L21.6 21V9z"></path><path d="M4.74 15.33l9.14-4.07a1 1 0 011.32.51 1 1 0 01-.51 1.32l-9.14 4.07 4 1.52L9 20l-6.6-2.53 2.53-6.6 1.32.51z"></path></svg></button>
               <button class="btn btn-sm join-item" id="ifcClipZ" style="margin-right:2px"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 13.82a1.09 1.09 0 01-.56-.56 2.08 2.08 0 011.78-3.09 2 2 0 01.81.17l3.87 1.72V3l-11 6v12l9.54-5.2z"></path><path d="M17.24 11.37l1.32-.51 2.53 6.6L14.5 20l-.5-1.32 4-1.52-9.18-4.07a1 1 0 01-.51-1.32 1 1 0 011.32-.51l9.14 4.07z"></path></svg></button>
-              <button class="btn btn-sm join-item" id="ifcClipY" style="margin-right:2px"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.25 11.18v3.52A1.87 1.87 0 0111 15.88a1 1 0 01-.32-.72V11.1l-9 4.5L12.45 21l9.9-5.4z"></path><path d="M8.85 8.4L8 7.5 12.45 3 17 7.5l-.9.9-2.7-2.7v9a.9.9 0 01-.9.9.9.9 0 01-.9-.9v-9z"></path></svg></button>
+              <button class="btn btn-sm join-item" id="ifcClipY" style="margin-right:0px"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.25 11.18v3.52A1.87 1.87 0 0111 15.88a1 1 0 01-.32-.72V11.1l-9 4.5L12.45 21l9.9-5.4z"></path><path d="M8.85 8.4L8 7.5 12.45 3 17 7.5l-.9.9-2.7-2.7v9a.9.9 0 01-.9.9.9.9 0 01-.9-.9v-9z"></path></svg></button>
             </div>
                                  
           </div>

package/src/styles-local.css

@@ -16,8 +16,8 @@
 
 /* === CSS VARIABLES (THEME COLORS) === */
 .ifc-viewer-container {
-  --color-primary: #3b82f6;
-  --color-primary-hover: #2563eb;
+  --color-primary: #80D8FF;
+  --color-primary-hover: #80D8FF;
   --color-secondary: #64748b;
   --color-secondary-hover: #475569;
   --color-neutral: #374151;
@@ -412,3 +412,63 @@
 .text-orange-600 { color: #ea580c; }
 .text-gray-600 { color: #4b5563; }
 .text-gray-500 { color: #6b7280; }
+
+/* === TOOLBAR BUTTONS SHADOWS === */
+#ifcToolbar .join {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25) !important;
+  transition: box-shadow 0.2s ease !important;
+  
+}
+
+/* #ifcToolbar .btn:hover {
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
+}
+
+#ifcToolbar .btn:active {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
+} */
+
+/* === HOME BUTTON === */
+.nav-cube-home-btn {
+  /* Позиционирование */
+  position: absolute;
+  z-index: 40;
+  
+  /* Стили как у .btn .btn-sm */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius);
+  height: 2rem;
+  min-height: 2rem;
+  width: 2rem;
+  padding: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-decoration: none;
+  border: 1px solid transparent;
+  cursor: pointer;
+  user-select: none;
+  transition-property: color, background-color, border-color, box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  background-color: var(--color-base-200);
+  color: var(--color-neutral);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.nav-cube-home-btn:hover {
+  background-color: var(--color-base-300);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.nav-cube-home-btn:active {
+  background-color: var(--color-base-300);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.nav-cube-home-btn svg {
+  fill: #000000;
+  width: 18px;
+  height: 18px;
+}

package/src/viewer/NavCube.js

@@ -30,12 +30,12 @@ export class NavCube {
     // Полупрозрачный куб с окрашенными сторонами (+X/-X, +Y/-Y, +Z/-Z)
     const geom = new THREE.BoxGeometry(1, 1, 1);
     const mats = [
-      new THREE.MeshBasicMaterial({ color: 0xd32f2f, transparent: true, opacity: this.faceOpacity }), // +X (red)
-      new THREE.MeshBasicMaterial({ color: 0x7f0000, transparent: true, opacity: this.faceOpacity }), // -X (dark red)
-      new THREE.MeshBasicMaterial({ color: 0x388e3c, transparent: true, opacity: this.faceOpacity }), // +Y (green)
-      new THREE.MeshBasicMaterial({ color: 0x1b5e20, transparent: true, opacity: this.faceOpacity }), // -Y (dark green)
-      new THREE.MeshBasicMaterial({ color: 0x1976d2, transparent: true, opacity: this.faceOpacity }), // +Z (blue)
-      new THREE.MeshBasicMaterial({ color: 0x0d47a1, transparent: true, opacity: this.faceOpacity }), // -Z (dark blue)
+      new THREE.MeshBasicMaterial({ color: 0x80CBC4, transparent: true, opacity: this.faceOpacity }), // +X (сзади - зеленый)
+      new THREE.MeshBasicMaterial({ color: 0xA5D6A7, transparent: true, opacity: this.faceOpacity }), // -X (спереди - зеленый)
+      new THREE.MeshBasicMaterial({ color: 0xFF8A65, transparent: true, opacity: this.faceOpacity }), // +Y (верх - красный )
+      new THREE.MeshBasicMaterial({ color: 0xEF9A9A, transparent: true, opacity: this.faceOpacity }), // -Y (низ - красный)
+      new THREE.MeshBasicMaterial({ color: 0x90CAF9, transparent: true, opacity: this.faceOpacity }), // +Z (справа - синий)
+      new THREE.MeshBasicMaterial({ color: 0x9FA8DA, transparent: true, opacity: this.faceOpacity }), // -Z (слева - синий)
     ];
     this.cube = new THREE.Mesh(geom, mats);
     this.cube.name = "nav-cube";
@@ -53,7 +53,7 @@ export class NavCube {
 
     // Рёбра для читабельности
     const edges = new THREE.EdgesGeometry(geom, 1);
-    const lineMat = new THREE.LineBasicMaterial({ color: 0x111111, depthTest: true });
+    const lineMat = new THREE.LineBasicMaterial({ color: 0xEEEEEE, depthTest: true });
     this.cubeEdges = new THREE.LineSegments(edges, lineMat);
     this.cubeEdges.renderOrder = 999;
     this.cube.add(this.cubeEdges);
@@ -90,20 +90,12 @@ export class NavCube {
     this.homeBtn = document.createElement('button');
     this.homeBtn.type = 'button';
     this.homeBtn.title = 'Home';
-    this.homeBtn.textContent = '⌂';
-    this.homeBtn.style.position = 'absolute';
-    this.homeBtn.style.zIndex = '40';
-    this.homeBtn.style.width = '28px';
-    this.homeBtn.style.height = '28px';
-    this.homeBtn.style.lineHeight = '28px';
-    this.homeBtn.style.textAlign = 'center';
-    this.homeBtn.style.borderRadius = '6px';
-    this.homeBtn.style.border = '1px solid rgba(255,255,255,0.4)';
-    this.homeBtn.style.background = 'rgba(0,0,0,0.45)';
-    this.homeBtn.style.color = '#fff';
-    this.homeBtn.style.cursor = 'pointer';
-    this.homeBtn.style.userSelect = 'none';
-    this.homeBtn.style.font = '14px/28px system-ui, sans-serif';
+    this.homeBtn.className = 'nav-cube-home-btn';
+    this.homeBtn.innerHTML = `   
+      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
+        <path d="M946.5 505L534.6 93.4a31.93 31.93 0 0 0-45.2 0L77.5 505c-12 12-18.8 28.3-18.8 45.3 0 35.3 28.7 64 64 64h43.4V908c0 17.7 14.3 32 32 32H448V716h112v224h265.9c17.7 0 32-14.3 32-32V614.3h43.4c17 0 33.3-6.7 45.3-18.8 24.9-25 24.9-65.5-.1-90.5z"/>
+      </svg>
+    `;
     // Позиция задаётся в renderOverlay относительно текущего размера
     this.homeBtn.addEventListener('click', () => { try { this.onHome && this.onHome(); } catch(_) {} });
     try { this.container.appendChild(this.homeBtn); } catch(_) {}
@@ -177,15 +169,15 @@ export class NavCube {
 
     // Позиционируем кнопку Home слева от куба
     if (this.homeBtn) {
-      this.homeBtn.style.top = `${this.marginPx + 2}px`;
-      this.homeBtn.style.left = `${Math.max(2, fullW - this.marginPx - vpSize - 32)}px`;
+      this.homeBtn.style.top = `${this.marginPx + 20}px`;
+      this.homeBtn.style.left = `${Math.max(2, fullW - this.marginPx - vpSize - 60)}px`;
     }
   }
 
   // ================= Подписи граней =================
   #addFaceLabels() {
     const makeFaceTexture = (text) => {
-      const size = 512; // квадрат для равномерности
+      const size = Math.floor(512 / 0.98); // квадрат для равномерности
       const canvas = document.createElement('canvas');
       canvas.width = size; canvas.height = size;
       const ctx = canvas.getContext('2d');
@@ -193,12 +185,13 @@ export class NavCube {
       ctx.clearRect(0, 0, size, size);
       // Чёрный крупный текст по центру
       ctx.fillStyle = '#000';
-      // Уменьшаем шрифт примерно в 1.2 раза относительно прошлого (0.42 -> ~0.35)
-      const fontPx = Math.floor(size * 0.35);
+      // Уменьшаем шрифт для лучшего размещения длинных слов
+      const fontPx = Math.floor(size * 0.2); // было 0.35, стало 0.25
       ctx.font = `bold ${fontPx}px sans-serif`;
       ctx.textAlign = 'center';
       ctx.textBaseline = 'middle';
       ctx.fillText(text.toUpperCase(), size / 2, size / 2);
+      
       const tex = new THREE.CanvasTexture(canvas);
       tex.minFilter = THREE.LinearFilter;
       tex.magFilter = THREE.LinearFilter;
@@ -209,8 +202,8 @@ export class NavCube {
       const tex = makeFaceTexture(text);
       if (!tex) return null;
       const mat = new THREE.MeshBasicMaterial({ map: tex, transparent: true, depthTest: true, depthWrite: false });
-      // Уменьшаем паддинги плашки: максимально приближаем к размеру грани
-      const plane = new THREE.Mesh(new THREE.PlaneGeometry(0.995, 0.995), mat);
+      // Уменьшаем размер плашки для лучшего размещения текста
+      const plane = new THREE.Mesh(new THREE.PlaneGeometry(0.98, 0.98), mat);
       // Ориентируем плоскость, чтобы нормаль смотрела как normal
       const q = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 0, 1), normal);
       plane.setRotationFromQuaternion(q);