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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sequent-org/ifc-viewer",
   "private": false,
-  "version": "1.2.4-ci.60.0",
+  "version": "1.2.4-ci.62.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

@@ -182,6 +182,7 @@
   display: block;
   transform: translate(-50%, -50%);
   will-change: transform;
+  transition: opacity 160ms ease;
 }
 
 .ifc-label-ghost,
@@ -223,6 +224,12 @@
   cursor: pointer;
 }
 
+.ifc-label-marker--hidden,
+.ifc-card-marker--hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
 /* Клик ловим на контейнере метки, дочерние элементы пусть не перехватывают */
 .ifc-label-marker .ifc-label-dot,
 .ifc-label-marker .ifc-label-num,

package/src/ui/LabelPlacementController.js

@@ -13,6 +13,8 @@ class LabelMarker {
     this.localPoint = deps.localPoint;
     this.el = deps.el;
     this.sceneState = deps.sceneState || null;
+    this.visible = null;
+    this.hiddenReason = null;
   }
 }
 
@@ -34,6 +36,7 @@ export class LabelPlacementController {
     this.viewer = deps.viewer;
     this.container = deps.container;
     this.logger = deps.logger || null;
+    this._visibilityLogEnabled = !!deps.visibilityLogEnabled;
 
     this._placing = false;
     this._nextId = 1;
@@ -46,6 +49,8 @@ export class LabelPlacementController {
     this._ndc = new THREE.Vector2();
     this._tmpV = new THREE.Vector3();
     this._tmpLocal = new THREE.Vector3();
+    this._tmpV2 = new THREE.Vector3();
+    this._tmpNdc = new THREE.Vector3();
 
     this._lastPointer = { x: 0, y: 0 };
     this._ghostPos = { x: 0, y: 0 };
@@ -97,6 +102,19 @@ export class LabelPlacementController {
       v2: new THREE.Vector3(),
     };
 
+    this._autoHide = {
+      active: false,
+      prevHidden: false,
+    };
+    this._showAfterStop = {
+      raf: 0,
+      active: false,
+      lastChangeTs: 0,
+      idleMs: 0,
+      eps: 5e-4,
+      lastCamMatrix: new Float32Array(16),
+    };
+
     this._ui = this.#createUi();
     this.#attachUi();
     this.#bindEvents();
@@ -140,6 +158,14 @@ export class LabelPlacementController {
     try { dom?.removeEventListener("contextmenu", this._onCanvasContextMenu, { capture: true }); } catch (_) {
       try { dom?.removeEventListener("contextmenu", this._onCanvasContextMenu); } catch (_) {}
     }
+    try {
+      const controls = this.viewer?.controls;
+      if (controls && typeof controls.removeEventListener === "function") {
+        try { controls.removeEventListener("start", this._onControlsStart); } catch (_) {}
+        try { controls.removeEventListener("end", this._onControlsEnd); } catch (_) {}
+      }
+    } catch (_) {}
+    try { this.#cancelShowAfterStop(); } catch (_) {}
 
     if (this._raf) cancelAnimationFrame(this._raf);
     this._raf = 0;
@@ -920,6 +946,19 @@ export class LabelPlacementController {
       this.#openCanvasMenu(hit, e.clientX, e.clientY);
     };
     dom.addEventListener("contextmenu", this._onCanvasContextMenu, { capture: true, passive: false });
+
+    const controls = this.viewer?.controls;
+    if (controls && typeof controls.addEventListener === "function") {
+      this._onControlsStart = () => {
+        this.#beginAutoHideForControls();
+      };
+      this._onControlsEnd = () => {
+        this.#scheduleShowAfterStop();
+      };
+      try { controls.addEventListener("start", this._onControlsStart); } catch (_) {}
+      try { controls.addEventListener("end", this._onControlsEnd); } catch (_) {}
+    }
+
   }
 
   #setGhostVisible(visible) {
@@ -1108,6 +1147,7 @@ export class LabelPlacementController {
     let best = null;
     for (const h of hits) {
       if (!h || !h.point) continue;
+      if (this.#isPointClippedBySection(h.point)) continue;
       const obj = h.object;
       if (obj && obj.isMesh) { best = h; break; }
     }
@@ -1460,12 +1500,12 @@ export class LabelPlacementController {
       if (!m || !m.el) continue;
 
       if (this._labelsHidden) {
-        m.el.style.display = "none";
+        this.#setMarkerVisibility(m, false, "labelsHidden");
         continue;
       }
 
       if (!model) {
-        m.el.style.display = "none";
+        this.#setMarkerVisibility(m, false, "noModel");
         continue;
       }
 
@@ -1473,12 +1513,21 @@ export class LabelPlacementController {
       this._tmpV.copy(m.localPoint);
       model.localToWorld(this._tmpV);
 
-      const ndc = this._tmpV.project(camera);
+      if (this.#isPointClippedBySection(this._tmpV)) {
+        this.#setMarkerVisibility(m, false, "clipped");
+        continue;
+      }
+
+      const ndc = this._tmpNdc.copy(this._tmpV).project(camera);
 
-      // Если точка за камерой или далеко за пределами — скрываем
-      const inFront = Number.isFinite(ndc.z) && ndc.z >= -1 && ndc.z <= 1;
-      if (!inFront) {
-        m.el.style.display = "none";
+      // Если точка за камерой или вне кадра — скрываем
+      const ndcFinite = Number.isFinite(ndc.x) && Number.isFinite(ndc.y) && Number.isFinite(ndc.z);
+      const inView = ndcFinite
+        && ndc.x >= -1 && ndc.x <= 1
+        && ndc.y >= -1 && ndc.y <= 1
+        && ndc.z >= -1 && ndc.z <= 1;
+      if (!inView) {
+        this.#setMarkerVisibility(m, false, "outOfView");
         continue;
       }
 
@@ -1486,15 +1535,78 @@ export class LabelPlacementController {
       const y = (-ndc.y * 0.5 + 0.5) * h;
 
       if (!Number.isFinite(x) || !Number.isFinite(y)) {
-        m.el.style.display = "none";
+        this.#setMarkerVisibility(m, false, "invalidScreen");
         continue;
       }
 
-      m.el.style.display = "block";
+      const occluded = this.#isPointOccludedByModel(this._tmpV, ndc, model, camera);
+      if (occluded) {
+        this.#setMarkerVisibility(m, false, "occluded");
+        continue;
+      }
+
+      this.#setMarkerVisibility(m, true, "visible");
       m.el.style.transform = `translate3d(${x}px, ${y}px, 0) translate(-50%, -50%)`;
     }
   }
 
+  #setMarkerVisibility(marker, visible, reason) {
+    if (!marker || !marker.el) return;
+    if (visible) {
+      marker.el.style.display = "block";
+      try { marker.el.classList.remove("ifc-label-marker--hidden"); } catch (_) {}
+    } else {
+      try { marker.el.classList.add("ifc-label-marker--hidden"); } catch (_) {}
+      marker.el.style.display = "block";
+    }
+    if (!this._visibilityLogEnabled) return;
+    if (marker.visible === visible && marker.hiddenReason === reason) return;
+    marker.visible = visible;
+    marker.hiddenReason = reason;
+    this.logger?.log?.("[LabelVisibility]", {
+      id: marker.id,
+      visible,
+      reason,
+    });
+  }
+
+  #isPointOccludedByModel(pointWorld, ndc, model, camera) {
+    if (!pointWorld || !ndc || !model || !camera) return false;
+    this._raycaster.setFromCamera(ndc, camera);
+    const hits = this._raycaster.intersectObject(model, true);
+    if (!hits || hits.length === 0) return false;
+    let hit = null;
+    for (const h of hits) {
+      if (!h || !h.object || !h.object.isMesh) continue;
+      if (this.#isPointClippedBySection(h.point)) continue;
+      hit = h;
+      break;
+    }
+    if (!hit || !Number.isFinite(hit.distance)) return false;
+    const ray = this._raycaster.ray;
+    this._tmpV2.copy(pointWorld).sub(ray.origin);
+    const t = this._tmpV2.dot(ray.direction);
+    if (!Number.isFinite(t) || t <= 0) return false;
+    const epsilon = 1e-2;
+    return hit.distance + epsilon < t;
+  }
+
+  #isPointClippedBySection(pointWorld) {
+    const planes = this.viewer?.clipping?.planes || [];
+    for (const plane of planes) {
+      if (!plane || !Number.isFinite(plane.constant)) continue;
+      const signed = plane.distanceToPoint(pointWorld);
+      if (signed < -1e-4) return true;
+    }
+    return false;
+  }
+
+  #copyMatrix(matrix, cache) {
+    if (!matrix || !cache || cache.length !== 16) return;
+    const e = matrix.elements;
+    for (let i = 0; i < 16; i += 1) cache[i] = e[i] ?? 0;
+  }
+
   #setLabelsHidden(hidden) {
     const next = !!hidden;
     if (this._labelsHidden === next) return;
@@ -1507,6 +1619,72 @@ export class LabelPlacementController {
     this.#syncHideButton();
   }
 
+  #beginAutoHideForControls() {
+    if (!this._autoHide.active) {
+      this._autoHide.prevHidden = this._labelsHidden;
+      this._autoHide.active = true;
+    }
+    this._labelsHidden = true;
+    this.#syncHideButton();
+    this.#cancelShowAfterStop();
+  }
+
+  #scheduleShowAfterStop() {
+    if (!this._autoHide.active) return;
+    const cam = this.viewer?.camera;
+    if (!cam) return;
+    this._showAfterStop.active = true;
+    this._showAfterStop.lastChangeTs = performance.now();
+    this.#copyMatrix(cam.matrixWorld, this._showAfterStop.lastCamMatrix);
+    if (!this._showAfterStop.raf) {
+      this._showAfterStop.raf = requestAnimationFrame(() => this.#tickShowAfterStop());
+    }
+  }
+
+  #cancelShowAfterStop() {
+    if (this._showAfterStop.raf) cancelAnimationFrame(this._showAfterStop.raf);
+    this._showAfterStop.raf = 0;
+    this._showAfterStop.active = false;
+  }
+
+  #tickShowAfterStop() {
+    if (!this._showAfterStop.active) {
+      this._showAfterStop.raf = 0;
+      return;
+    }
+    const cam = this.viewer?.camera;
+    if (!cam) {
+      this._showAfterStop.raf = 0;
+      return;
+    }
+    const now = performance.now();
+    if (!this.#isCameraStable(cam.matrixWorld, this._showAfterStop.lastCamMatrix, this._showAfterStop.eps)) {
+      this._showAfterStop.lastChangeTs = now;
+    }
+    if (now - this._showAfterStop.lastChangeTs >= this._showAfterStop.idleMs) {
+      this._labelsHidden = this._autoHide.prevHidden;
+      this._autoHide.active = false;
+      this.#syncHideButton();
+      this._showAfterStop.active = false;
+      this._showAfterStop.raf = 0;
+      return;
+    }
+    this._showAfterStop.raf = requestAnimationFrame(() => this.#tickShowAfterStop());
+  }
+
+  #isCameraStable(matrix, cache, eps) {
+    if (!matrix || !cache || cache.length !== 16) return true;
+    const e = matrix.elements;
+    let stable = true;
+    for (let i = 0; i < 16; i += 1) {
+      const v = e[i] ?? 0;
+      const d = Math.abs(v - cache[i]);
+      if (d > eps) stable = false;
+      cache[i] = v;
+    }
+    return stable;
+  }
+
   #syncHideButton() {
     const btn = this._ui?.hideBtn;
     if (!btn) return;

package/src/viewer/Viewer.js

@@ -190,6 +190,15 @@ export class Viewer {
     this._rotAngleEps = 0.01;     // ~0.57° минимальный угловой сдвиг
     this._axisEmaAlpha = 0.15;    // коэффициент сглаживания оси
 
+    this._damping = {
+      dynamic: true,
+      base: 0.06,
+      settle: 0.18,
+      settleMs: 250,
+      isSettling: false,
+      lastEndTs: 0,
+    };
+
     this._onPointerDown = null;
     this._onPointerUp = null;
     this._onPointerMove = null;
@@ -701,13 +710,25 @@ export class Viewer {
       const dir = this.camera.position.clone().sub(this.controls.target).normalize();
       this._prevViewDir = dir;
       this._smoothedAxis = null;
+      if (this._damping.dynamic) {
+        this.controls.dampingFactor = this._damping.base;
+        this._damping.isSettling = false;
+        this.controls.enableDamping = true;
+      }
     };
     this._onControlsChange = () => {
       // Обновляем ось только при зажатой ЛКМ (вращение)
       if (!this._isLmbDown) return;
       this.#updateRotationAxisLine();
     };
-    this._onControlsEnd = () => { this.#hideRotationAxisLine(); };
+    this._onControlsEnd = () => {
+      this.#hideRotationAxisLine();
+      if (this._damping.dynamic && this.controls) {
+        this._damping.isSettling = true;
+        this._damping.lastEndTs = performance.now();
+        this.controls.enableDamping = true;
+      }
+    };
     this.controls.addEventListener('start', this._onControlsStart);
     this.controls.addEventListener('change', this._onControlsChange);
     this.controls.addEventListener('end', this._onControlsEnd);
@@ -768,7 +789,10 @@ export class Viewer {
       this.demoCube.rotation.x += 0.005;
     }
 
-    if (this.controls) this.controls.update();
+    if (this.controls) {
+      this.#updateDynamicDamping();
+      this.controls.update();
+    }
     // "Внутренняя" подсветка/пост-эффекты: включаются только когда камера внутри модели
     this.#updateInteriorAssist();
     this._notifyZoomIfChanged();
@@ -814,6 +838,22 @@ export class Viewer {
     this.animationId = requestAnimationFrame(this.animate);
   }
 
+  #updateDynamicDamping() {
+    if (!this.controls) return;
+    if (!this._damping.dynamic || !this.controls.enableDamping) return;
+    if (this._damping.isSettling) {
+      const now = performance.now();
+      if (now - this._damping.lastEndTs <= this._damping.settleMs) {
+        this.controls.dampingFactor = this._damping.settle;
+      } else {
+        this._damping.isSettling = false;
+        this.controls.dampingFactor = this._damping.base;
+      }
+    } else {
+      this.controls.dampingFactor = this._damping.base;
+    }
+  }
+
   dispose() {
     if (this.animationId) cancelAnimationFrame(this.animationId);
     window.removeEventListener("resize", this.handleResize);