@sequent-org/ifc-viewer 1.2.4-ci.25.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.25.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 {
   /**
@@ -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

@@ -90,21 +90,12 @@ export class NavCube {
     this.homeBtn = document.createElement('button');
     this.homeBtn.type = 'button';
     this.homeBtn.title = 'Home';
+    this.homeBtn.className = 'nav-cube-home-btn';
     this.homeBtn.innerHTML = `   
-      <svg fill="#000000" width="20px" height="20px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
+      <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>
     `;
-    this.homeBtn.style.position = 'absolute';
-    this.homeBtn.style.zIndex = '40';   
-    this.homeBtn.style.width = '30px';
-    this.homeBtn.style.height = '30px';    
-    this.homeBtn.style.borderRadius = '6px';
-    this.homeBtn.style.border = '0px solid rgba(255,255,255,0.1)';
-    this.homeBtn.style.background = 'rgba(0, 0, 0, 0.05)';
-    this.homeBtn.style.color = '#fff';
-    this.homeBtn.style.cursor = 'pointer';
-    this.homeBtn.style.userSelect = 'none';    
     // Позиция задаётся в renderOverlay относительно текущего размера
     this.homeBtn.addEventListener('click', () => { try { this.onHome && this.onHome(); } catch(_) {} });
     try { this.container.appendChild(this.homeBtn); } catch(_) {}