@sequent-org/ifc-viewer 1.2.4-ci.58.0 → 1.2.4-ci.60.0

package/package.json

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

package/src/styles-local.css

@@ -111,7 +111,18 @@
 .pointer-events-none { pointer-events: none; }
 
 /* === IFC LABEL MARKERS (UI overlay) === */
+.ifc-label-actions {
+  position: absolute;
+  left: 12px;
+  top: 12px;
+  z-index: 9999;
+  display: flex;
+  gap: 6px;
+  pointer-events: auto;
+}
+
 .ifc-label-add-btn,
+.ifc-label-hide-btn,
 .ifc-card-add-btn {
   position: absolute;
   left: 12px;
@@ -132,10 +143,35 @@
 }
 
 .ifc-label-add-btn:hover,
+.ifc-label-hide-btn:hover,
 .ifc-card-add-btn:hover {
   background: rgba(255, 255, 255, 0.98);
 }
 
+.ifc-label-actions .ifc-label-add-btn,
+.ifc-label-actions .ifc-label-hide-btn {
+  position: static;
+  left: auto;
+  top: auto;
+}
+
+.ifc-label-hide-btn--active {
+  background: rgba(37, 99, 235, 0.95);
+  border-color: rgba(37, 99, 235, 0.95);
+  color: #ffffff;
+}
+
+.ifc-label-hide-btn--active:hover {
+  background: rgba(29, 78, 216, 0.98);
+  border-color: rgba(29, 78, 216, 0.98);
+}
+
+.ifc-label-add-btn:disabled,
+.ifc-label-add-btn--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .ifc-label-ghost,
 .ifc-label-marker,
 .ifc-card-ghost,
@@ -232,6 +268,13 @@
   background: rgba(37, 99, 235, 0.12);
 }
 
+.ifc-label-menu-item--disabled,
+.ifc-label-menu-item--disabled:hover {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: transparent;
+}
+
 /* === NAVBAR COMPONENT === */
 .navbar {
   display: flex;

package/src/ui/LabelPlacementController.js

@@ -40,6 +40,7 @@ export class LabelPlacementController {
     /** @type {LabelMarker[]} */
     this._markers = [];
     this._selectedId = null;
+    this._labelsHidden = false;
 
     this._raycaster = new THREE.Raycaster();
     this._ndc = new THREE.Vector2();
@@ -53,6 +54,8 @@ export class LabelPlacementController {
     this._labelDrag = {
       active: false,
       moved: false,
+      // true => призрак живёт в document.body и позиционируется по viewport
+      ghostInBody: false,
       pointerId: null,
       id: null,
       start: { x: 0, y: 0 },
@@ -129,6 +132,7 @@ export class LabelPlacementController {
     try { document.removeEventListener("pointerup", this._onLabelDragPointerUp); } catch (_) {}
     try { document.removeEventListener("pointercancel", this._onLabelDragPointerCancel); } catch (_) {}
     try { this._ui?.btn?.removeEventListener("click", this._onBtnClick); } catch (_) {}
+    try { this._ui?.hideBtn?.removeEventListener("click", this._onHideBtnClick); } catch (_) {}
     try { this._ui?.menu?.removeEventListener("pointerdown", this._onMenuPointerDown); } catch (_) {}
     try { this._ui?.menu?.removeEventListener("click", this._onMenuClick); } catch (_) {}
     try { this._ui?.canvasMenu?.removeEventListener("pointerdown", this._onCanvasMenuPointerDown); } catch (_) {}
@@ -145,13 +149,13 @@ export class LabelPlacementController {
 
     try { this._ui?.ghost?.remove?.(); } catch (_) {}
     try { this._ui?.dragGhost?.remove?.(); } catch (_) {}
-    try { this._ui?.btn?.remove?.(); } catch (_) {}
+    try { this._ui?.actions?.remove?.(); } catch (_) {}
     try { this._ui?.menu?.remove?.(); } catch (_) {}
     try { this._ui?.canvasMenu?.remove?.(); } catch (_) {}
   }
 
   startPlacement() {
-    if (this._placing) return;
+    if (this._placing || this._labelsHidden) return;
     this._placing = true;
 
     const controls = this.viewer?.controls;
@@ -591,11 +595,24 @@ export class LabelPlacementController {
   }
 
   #createUi() {
+    const actions = document.createElement("div");
+    actions.className = "ifc-label-actions";
+
     const btn = document.createElement("button");
     btn.type = "button";
     btn.className = "ifc-label-add-btn";
     btn.textContent = "+ Добавить метку";
 
+    const hideBtn = document.createElement("button");
+    hideBtn.type = "button";
+    hideBtn.className = "ifc-label-hide-btn";
+    hideBtn.textContent = "Скрыть метки";
+    hideBtn.setAttribute("aria-pressed", "false");
+    hideBtn.style.display = "none";
+
+    actions.appendChild(btn);
+    actions.appendChild(hideBtn);
+
     const ghost = document.createElement("div");
     ghost.className = "ifc-label-ghost";
     ghost.setAttribute("aria-hidden", "true");
@@ -615,6 +632,8 @@ export class LabelPlacementController {
     const dragGhost = document.createElement("div");
     dragGhost.className = "ifc-label-ghost ifc-label-ghost--drag";
     dragGhost.setAttribute("aria-hidden", "true");
+    // Фиксируем позицию, чтобы призрак не обрезался контейнером viewer
+    dragGhost.style.position = "fixed";
     dragGhost.style.display = "none";
     dragGhost.style.left = "0px";
     dragGhost.style.top = "0px";
@@ -666,14 +685,21 @@ export class LabelPlacementController {
 
     canvasMenu.appendChild(menuAdd);
 
-    return { btn, ghost, dot, num, dragGhost, dragNum, menu, canvasMenu };
+    return { actions, btn, hideBtn, ghost, dot, num, dragGhost, dragNum, menu, canvasMenu, menuAdd };
   }
 
   #attachUi() {
     // Важно: container должен быть position:relative (в index.html уже так).
-    this.container.appendChild(this._ui.btn);
+    this.container.appendChild(this._ui.actions);
     this.container.appendChild(this._ui.ghost);
-    this.container.appendChild(this._ui.dragGhost);
+    // Призрак перетаскивания добавляем в body, чтобы не обрезался overflow контейнера
+    if (document?.body) {
+      document.body.appendChild(this._ui.dragGhost);
+      this._labelDrag.ghostInBody = true;
+    } else {
+      this.container.appendChild(this._ui.dragGhost);
+      this._labelDrag.ghostInBody = false;
+    }
     this.container.appendChild(this._ui.menu);
     this.container.appendChild(this._ui.canvasMenu);
   }
@@ -688,6 +714,15 @@ export class LabelPlacementController {
     };
     this._ui.btn.addEventListener("click", this._onBtnClick, { passive: false });
 
+    this._onHideBtnClick = (e) => {
+      try { e.preventDefault(); } catch (_) {}
+      try { e.stopPropagation(); } catch (_) {}
+      try { e.stopImmediatePropagation?.(); } catch (_) {}
+      if (!this._markers.length) return;
+      this.#setLabelsHidden(!this._labelsHidden);
+    };
+    this._ui.hideBtn.addEventListener("click", this._onHideBtnClick, { passive: false });
+
     this._onMenuPointerDown = (e) => {
       // Не даём клику меню попасть в canvas/OrbitControls
       try { e.preventDefault(); } catch (_) {}
@@ -720,6 +755,7 @@ export class LabelPlacementController {
       const target = e.target;
       const action = target?.getAttribute?.("data-action");
       if (action !== "add") return;
+      if (this._labelsHidden) return;
       try { e.preventDefault(); } catch (_) {}
       try { e.stopPropagation(); } catch (_) {}
 
@@ -942,9 +978,13 @@ export class LabelPlacementController {
 
   #updateDragGhostFromClient(clientX, clientY) {
     this._labelDrag.last = { x: clientX, y: clientY };
-    if (!this._containerOffsetValid) this.#refreshContainerOffset();
-    const x = (clientX - this._containerOffset.left);
-    const y = (clientY - this._containerOffset.top);
+    let x = clientX;
+    let y = clientY;
+    if (!this._labelDrag.ghostInBody) {
+      if (!this._containerOffsetValid) this.#refreshContainerOffset();
+      x = (clientX - this._containerOffset.left);
+      y = (clientY - this._containerOffset.top);
+    }
     this._labelDrag.ghostPos.x = x;
     this._labelDrag.ghostPos.y = y;
     this.#applyDragGhostTransform();
@@ -1008,6 +1048,11 @@ export class LabelPlacementController {
     const moved = !!this._labelDrag.moved;
     const clientX = e?.clientX ?? this._labelDrag.last.x;
     const clientY = e?.clientY ?? this._labelDrag.last.y;
+    this.logger?.log?.("[LabelClickDbg]", {
+      phase: "finish",
+      moved: !!moved,
+      id: marker?.id ?? this._labelDrag.id,
+    });
 
     this._labelDrag.active = false;
     this._labelDrag.moved = false;
@@ -1261,8 +1306,17 @@ export class LabelPlacementController {
       sceneState: data.sceneState || null,
     });
     this._markers.push(marker);
+    this.#syncHideButton();
 
     const onMarkerPointerDown = (e) => {
+      this.logger?.log?.("[LabelClickDbg]", {
+        phase: "down",
+        button: e?.button,
+        buttons: e?.buttons,
+        clientX: e?.clientX,
+        clientY: e?.clientY,
+        pointerId: e?.pointerId,
+      });
       // Важно: не даём клику попасть в canvas/OrbitControls
       try { e.preventDefault(); } catch (_) {}
       try { e.stopPropagation(); } catch (_) {}
@@ -1281,6 +1335,14 @@ export class LabelPlacementController {
       try { marker.el.addEventListener("pointerdown", onMarkerPointerDown); } catch (_) {}
     }
     const onMarkerPointerUp = (e) => {
+      this.logger?.log?.("[LabelClickDbg]", {
+        phase: "up",
+        button: e?.button,
+        buttons: e?.buttons,
+        clientX: e?.clientX,
+        clientY: e?.clientY,
+        pointerId: e?.pointerId,
+      });
     };
     try { marker.el.addEventListener("pointerup", onMarkerPointerUp, { capture: true, passive: true }); } catch (_) {
       try { marker.el.addEventListener("pointerup", onMarkerPointerUp); } catch (_) {}
@@ -1336,6 +1398,7 @@ export class LabelPlacementController {
     }
     if (maxNumericId != null) this._nextId = Math.max(1, Math.floor(maxNumericId) + 1);
     if (prevSelectedId != null) this.selectLabel(prevSelectedId);
+    this.#syncHideButton();
   }
 
   getLabelMarkers() {
@@ -1396,6 +1459,11 @@ export class LabelPlacementController {
     for (const m of this._markers) {
       if (!m || !m.el) continue;
 
+      if (this._labelsHidden) {
+        m.el.style.display = "none";
+        continue;
+      }
+
       if (!model) {
         m.el.style.display = "none";
         continue;
@@ -1426,5 +1494,44 @@ export class LabelPlacementController {
       m.el.style.transform = `translate3d(${x}px, ${y}px, 0) translate(-50%, -50%)`;
     }
   }
+
+  #setLabelsHidden(hidden) {
+    const next = !!hidden;
+    if (this._labelsHidden === next) return;
+    this._labelsHidden = next;
+    if (this._labelsHidden) {
+      try { this.cancelPlacement(); } catch (_) {}
+      try { this.#closeContextMenu(); } catch (_) {}
+      try { this.#closeCanvasMenu(); } catch (_) {}
+    }
+    this.#syncHideButton();
+  }
+
+  #syncHideButton() {
+    const btn = this._ui?.hideBtn;
+    if (!btn) return;
+    const hasMarkers = this._markers.length > 0;
+    btn.style.display = hasMarkers ? "block" : "none";
+    if (!hasMarkers && this._labelsHidden) {
+      this._labelsHidden = false;
+    }
+    btn.setAttribute("aria-pressed", this._labelsHidden ? "true" : "false");
+    try { btn.classList.toggle("ifc-label-hide-btn--active", this._labelsHidden); } catch (_) {}
+    this.#syncAddAvailability();
+  }
+
+  #syncAddAvailability() {
+    const disabled = !!this._labelsHidden;
+    const btn = this._ui?.btn;
+    if (btn) {
+      btn.disabled = disabled;
+      try { btn.classList.toggle("ifc-label-add-btn--disabled", disabled); } catch (_) {}
+    }
+    const menuAdd = this._ui?.menuAdd;
+    if (menuAdd) {
+      menuAdd.disabled = disabled;
+      try { menuAdd.classList.toggle("ifc-label-menu-item--disabled", disabled); } catch (_) {}
+    }
+  }
 }