@sequent-org/ifc-viewer 1.2.4-ci.54.0 → 1.2.4-ci.56.0

package/package.json

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

package/src/ui/LabelPlacementController.js

@@ -50,6 +50,21 @@ export class LabelPlacementController {
     this._ghostPos = { x: 0, y: 0 };
     this._raf = 0;
 
+    this._labelDrag = {
+      active: false,
+      moved: false,
+      pointerId: null,
+      id: null,
+      start: { x: 0, y: 0 },
+      last: { x: 0, y: 0 },
+      ghostPos: { x: 0, y: 0 },
+      clickMarker: null,
+      prevControlsEnabled: null,
+      threshold: 4,
+    };
+
+    this._labelDragDropSelector = deps?.labelDragDropSelector || null;
+
     this._controlsWasEnabled = null;
 
     this._containerOffset = { left: 0, top: 0 };
@@ -59,6 +74,10 @@ export class LabelPlacementController {
       open: false,
       marker: null,
     };
+    this._canvasMenu = {
+      open: false,
+      hit: null,
+    };
 
     this._fly = {
       raf: 0,
@@ -92,13 +111,31 @@ export class LabelPlacementController {
     try { dom?.removeEventListener("pointerdown", this._onPointerDownCapture, { capture: true }); } catch (_) {
       try { dom?.removeEventListener("pointerdown", this._onPointerDownCapture); } catch (_) {}
     }
+    try { dom?.removeEventListener("pointerdown", this._onDbgDomPointerDown); } catch (_) {}
+    try { dom?.removeEventListener("pointermove", this._onDbgDomPointerMove); } catch (_) {}
+    try { dom?.removeEventListener("pointerup", this._onDbgDomPointerUp); } catch (_) {}
     try { window.removeEventListener("keydown", this._onKeyDown); } catch (_) {}
     try { window.removeEventListener("resize", this._onWindowResize); } catch (_) {}
     try { window.removeEventListener("scroll", this._onWindowScroll, true); } catch (_) {}
     try { window.removeEventListener("pointerdown", this._onWindowPointerDown, true); } catch (_) {}
+    try { document.removeEventListener("pointerdown", this._onDbgDocPointerDown); } catch (_) {}
+    try { document.removeEventListener("pointermove", this._onDbgDocPointerMove); } catch (_) {}
+    try { document.removeEventListener("pointerup", this._onDbgDocPointerUp); } catch (_) {}
+    try { document.removeEventListener("dragstart", this._onDbgDocDragStart); } catch (_) {}
+    try { document.removeEventListener("dragend", this._onDbgDocDragEnd); } catch (_) {}
+    try { document.removeEventListener("dragover", this._onDbgDocDragOver); } catch (_) {}
+    try { document.removeEventListener("drop", this._onDbgDocDrop); } catch (_) {}
+    try { document.removeEventListener("pointermove", this._onLabelDragPointerMove); } catch (_) {}
+    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?.menu?.removeEventListener("pointerdown", this._onMenuPointerDown); } catch (_) {}
     try { this._ui?.menu?.removeEventListener("click", this._onMenuClick); } catch (_) {}
+    try { this._ui?.canvasMenu?.removeEventListener("pointerdown", this._onCanvasMenuPointerDown); } catch (_) {}
+    try { this._ui?.canvasMenu?.removeEventListener("click", this._onCanvasMenuClick); } catch (_) {}
+    try { dom?.removeEventListener("contextmenu", this._onCanvasContextMenu, { capture: true }); } catch (_) {
+      try { dom?.removeEventListener("contextmenu", this._onCanvasContextMenu); } catch (_) {}
+    }
 
     if (this._raf) cancelAnimationFrame(this._raf);
     this._raf = 0;
@@ -107,8 +144,10 @@ export class LabelPlacementController {
     this._markers.length = 0;
 
     try { this._ui?.ghost?.remove?.(); } catch (_) {}
+    try { this._ui?.dragGhost?.remove?.(); } catch (_) {}
     try { this._ui?.btn?.remove?.(); } catch (_) {}
     try { this._ui?.menu?.remove?.(); } catch (_) {}
+    try { this._ui?.canvasMenu?.remove?.(); } catch (_) {}
   }
 
   startPlacement() {
@@ -533,6 +572,20 @@ export class LabelPlacementController {
     ghost.appendChild(dot);
     ghost.appendChild(num);
 
+    const dragGhost = document.createElement("div");
+    dragGhost.className = "ifc-label-ghost ifc-label-ghost--drag";
+    dragGhost.setAttribute("aria-hidden", "true");
+    dragGhost.style.display = "none";
+    dragGhost.style.left = "0px";
+    dragGhost.style.top = "0px";
+
+    const dragDot = document.createElement("div");
+    dragDot.className = "ifc-label-dot";
+    const dragNum = document.createElement("div");
+    dragNum.className = "ifc-label-num";
+    dragGhost.appendChild(dragDot);
+    dragGhost.appendChild(dragNum);
+
     const menu = document.createElement("div");
     menu.className = "ifc-label-menu";
     menu.style.display = "none";
@@ -560,14 +613,29 @@ export class LabelPlacementController {
     menu.appendChild(menuMove);
     menu.appendChild(menuDelete);
 
-    return { btn, ghost, dot, num, menu };
+    const canvasMenu = document.createElement("div");
+    canvasMenu.className = "ifc-label-menu";
+    canvasMenu.style.display = "none";
+    canvasMenu.setAttribute("role", "menu");
+
+    const menuAdd = document.createElement("button");
+    menuAdd.type = "button";
+    menuAdd.className = "ifc-label-menu-item";
+    menuAdd.textContent = "Добавить метку";
+    menuAdd.setAttribute("data-action", "add");
+
+    canvasMenu.appendChild(menuAdd);
+
+    return { btn, ghost, dot, num, dragGhost, dragNum, menu, canvasMenu };
   }
 
   #attachUi() {
     // Важно: container должен быть position:relative (в index.html уже так).
     this.container.appendChild(this._ui.btn);
     this.container.appendChild(this._ui.ghost);
+    this.container.appendChild(this._ui.dragGhost);
     this.container.appendChild(this._ui.menu);
+    this.container.appendChild(this._ui.canvasMenu);
   }
 
   #bindEvents() {
@@ -600,6 +668,27 @@ export class LabelPlacementController {
     };
     this._ui.menu.addEventListener("click", this._onMenuClick);
 
+    this._onCanvasMenuPointerDown = (e) => {
+      // Не даём клику меню попасть в canvas/OrbitControls
+      try { e.preventDefault(); } catch (_) {}
+      try { e.stopPropagation(); } catch (_) {}
+      try { e.stopImmediatePropagation?.(); } catch (_) {}
+    };
+    this._ui.canvasMenu.addEventListener("pointerdown", this._onCanvasMenuPointerDown, { passive: false });
+
+    this._onCanvasMenuClick = (e) => {
+      const target = e.target;
+      const action = target?.getAttribute?.("data-action");
+      if (action !== "add") return;
+      try { e.preventDefault(); } catch (_) {}
+      try { e.stopPropagation(); } catch (_) {}
+
+      const hit = this._canvasMenu?.hit || null;
+      if (hit) this.#createMarkerAtHit(hit);
+      this.#closeCanvasMenu();
+    };
+    this._ui.canvasMenu.addEventListener("click", this._onCanvasMenuClick);
+
     this._onKeyDown = (e) => {
       if (this._placing) {
         if (e.key === "Escape") this.cancelPlacement();
@@ -634,10 +723,13 @@ export class LabelPlacementController {
     window.addEventListener("keydown", this._onKeyDown);
 
     this._onWindowPointerDown = (e) => {
-      if (!this._contextMenu.open) return;
+      if (!this._contextMenu.open && !this._canvasMenu.open) return;
       const menu = this._ui?.menu;
+      const canvasMenu = this._ui?.canvasMenu;
       if (menu && menu.contains(e.target)) return;
+      if (canvasMenu && canvasMenu.contains(e.target)) return;
       this.#closeContextMenu();
+      this.#closeCanvasMenu();
     };
     window.addEventListener("pointerdown", this._onWindowPointerDown, true);
 
@@ -657,9 +749,64 @@ export class LabelPlacementController {
     // scroll слушаем в capture, чтобы ловить скролл вложенных контейнеров
     window.addEventListener("scroll", this._onWindowScroll, true);
 
+    const logDnDEvent = (scope, e) => {
+      const target = e?.target || null;
+      const closestMarker = (target && typeof target.closest === "function")
+        ? target.closest(".ifc-label-marker")
+        : null;
+      if (!closestMarker) return;
+      const payload = {
+        type: e?.type,
+        target,
+        closestMarker,
+        button: e?.button,
+        buttons: e?.buttons,
+        clientX: e?.clientX,
+        clientY: e?.clientY,
+        defaultPrevented: !!e?.defaultPrevented,
+      };
+      try {
+        this.logger?.log?.("[LabelDnD]", scope, payload);
+      } catch (_) {
+        try { console.log("[LabelDnD]", scope, payload); } catch (_) {}
+      }
+    };
+
+    this._onDbgDocPointerDown = (e) => logDnDEvent("document", e);
+    this._onDbgDocPointerMove = (e) => logDnDEvent("document", e);
+    this._onDbgDocPointerUp = (e) => logDnDEvent("document", e);
+    this._onDbgDocDragStart = (e) => logDnDEvent("document", e);
+    this._onDbgDocDragEnd = (e) => logDnDEvent("document", e);
+    this._onDbgDocDragOver = (e) => logDnDEvent("document", e);
+    this._onDbgDocDrop = (e) => logDnDEvent("document", e);
+
+    document.addEventListener("pointerdown", this._onDbgDocPointerDown);
+    document.addEventListener("pointermove", this._onDbgDocPointerMove);
+    document.addEventListener("pointerup", this._onDbgDocPointerUp);
+    document.addEventListener("dragstart", this._onDbgDocDragStart);
+    document.addEventListener("dragend", this._onDbgDocDragEnd);
+    document.addEventListener("dragover", this._onDbgDocDragOver);
+    document.addEventListener("drop", this._onDbgDocDrop);
+
+    this._onLabelDragPointerMove = (e) => this.#updateLabelDrag(e);
+    this._onLabelDragPointerUp = (e) => this.#finishLabelDrag(e, "pointerup");
+    this._onLabelDragPointerCancel = (e) => this.#finishLabelDrag(e, "pointercancel");
+
+    document.addEventListener("pointermove", this._onLabelDragPointerMove, { passive: true });
+    document.addEventListener("pointerup", this._onLabelDragPointerUp, { passive: true });
+    document.addEventListener("pointercancel", this._onLabelDragPointerCancel, { passive: true });
+
     const dom = this.viewer?.renderer?.domElement;
     if (!dom) return;
 
+    this._onDbgDomPointerDown = (e) => logDnDEvent("ifc3dHost", e);
+    this._onDbgDomPointerMove = (e) => logDnDEvent("ifc3dHost", e);
+    this._onDbgDomPointerUp = (e) => logDnDEvent("ifc3dHost", e);
+
+    dom.addEventListener("pointerdown", this._onDbgDomPointerDown, { passive: true });
+    dom.addEventListener("pointermove", this._onDbgDomPointerMove, { passive: true });
+    dom.addEventListener("pointerup", this._onDbgDomPointerUp, { passive: true });
+
     this._onPointerMove = (e) => {
       if (!this._placing) return;
       this.#updateGhostFromClient(e.clientX, e.clientY);
@@ -692,6 +839,25 @@ export class LabelPlacementController {
       this.cancelPlacement(); // по ТЗ: “вторым кликом устанавливаем”
     };
     dom.addEventListener("pointerdown", this._onPointerDownCapture, { capture: true, passive: false });
+
+    this._onCanvasContextMenu = (e) => {
+      // Контекстное меню добавления метки по ПКМ на модели (если нет метки под курсором).
+      try { e.preventDefault(); } catch (_) {}
+      try { e.stopPropagation(); } catch (_) {}
+      try { e.stopImmediatePropagation?.(); } catch (_) {}
+      try { this.cancelPlacement(); } catch (_) {}
+
+      const el = document.elementFromPoint?.(e.clientX, e.clientY);
+      if (el && el.closest?.(".ifc-label-marker")) return;
+      if (el && el.closest?.(".ifc-label-menu")) return;
+
+      const hit = this.#pickModelPoint(e.clientX, e.clientY);
+      if (!hit) return;
+
+      this.#closeContextMenu();
+      this.#openCanvasMenu(hit, e.clientX, e.clientY);
+    };
+    dom.addEventListener("contextmenu", this._onCanvasContextMenu, { capture: true, passive: false });
   }
 
   #setGhostVisible(visible) {
@@ -737,6 +903,117 @@ export class LabelPlacementController {
     this.#updateGhostFromClient(this._lastPointer.x, this._lastPointer.y);
   }
 
+  #setDragGhostVisible(visible) {
+    if (!this._ui?.dragGhost) return;
+    this._ui.dragGhost.style.display = visible ? "block" : "none";
+  }
+
+  #applyDragGhostTransform() {
+    const g = this._ui?.dragGhost;
+    if (!g) return;
+    g.style.transform = `translate3d(${this._labelDrag.ghostPos.x}px, ${this._labelDrag.ghostPos.y}px, 0) translate(-50%, -50%)`;
+  }
+
+  #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);
+    this._labelDrag.ghostPos.x = x;
+    this._labelDrag.ghostPos.y = y;
+    this.#applyDragGhostTransform();
+  }
+
+  #beginLabelDrag(marker, e) {
+    if (!marker || !e || e.button !== 0) return;
+    this._labelDrag.active = true;
+    this._labelDrag.moved = false;
+    this._labelDrag.pointerId = e.pointerId ?? null;
+    this._labelDrag.id = marker.id;
+    this._labelDrag.start = { x: e.clientX, y: e.clientY };
+    this._labelDrag.last = { x: e.clientX, y: e.clientY };
+    this._labelDrag.clickMarker = marker;
+
+    try {
+      this._labelDrag.prevControlsEnabled = this.viewer?.controls?.enabled ?? null;
+      if (this.viewer?.controls) this.viewer.controls.enabled = false;
+    } catch (_) {}
+
+    if (this._ui?.dragNum) this._ui.dragNum.textContent = String(marker.id);
+    this.#setDragGhostVisible(false);
+
+    try { marker.el?.setPointerCapture?.(e.pointerId); } catch (_) {}
+
+    this.#dispatchLabelEvent("ifcviewer:label-drag-start", {
+      id: marker.id,
+      clientX: e.clientX,
+      clientY: e.clientY,
+    }, null);
+  }
+
+  #updateLabelDrag(e) {
+    if (!this._labelDrag.active || !e) return;
+    if (this._labelDrag.pointerId != null && e.pointerId != null && e.pointerId !== this._labelDrag.pointerId) return;
+
+    const dx = (e.clientX - this._labelDrag.start.x);
+    const dy = (e.clientY - this._labelDrag.start.y);
+    const dist = Math.hypot(dx, dy);
+    if (!this._labelDrag.moved && dist >= this._labelDrag.threshold) {
+      this._labelDrag.moved = true;
+      this.#setDragGhostVisible(true);
+    }
+
+    if (this._labelDrag.moved) {
+      this.#updateDragGhostFromClient(e.clientX, e.clientY);
+    }
+  }
+
+  #resolveDropTarget(clientX, clientY) {
+    const el = document.elementFromPoint?.(clientX, clientY) || null;
+    if (!el) return { element: null, card: null };
+    if (!this._labelDragDropSelector) return { element: el, card: null };
+    const card = el.closest?.(this._labelDragDropSelector) || null;
+    return { element: el, card };
+  }
+
+  #finishLabelDrag(e, reason = "pointerup") {
+    if (!this._labelDrag.active) return;
+    const marker = this._labelDrag.clickMarker;
+    const moved = !!this._labelDrag.moved;
+    const clientX = e?.clientX ?? this._labelDrag.last.x;
+    const clientY = e?.clientY ?? this._labelDrag.last.y;
+
+    this._labelDrag.active = false;
+    this._labelDrag.moved = false;
+    this._labelDrag.pointerId = null;
+    this._labelDrag.id = null;
+    this._labelDrag.clickMarker = null;
+
+    this.#setDragGhostVisible(false);
+
+    try {
+      if (this.viewer?.controls && this._labelDrag.prevControlsEnabled != null) {
+        this.viewer.controls.enabled = !!this._labelDrag.prevControlsEnabled;
+      }
+    } catch (_) {}
+    this._labelDrag.prevControlsEnabled = null;
+
+    if (!moved) {
+      if (marker) this.#handleMarkerClick(marker);
+      return;
+    }
+
+    const drop = this.#resolveDropTarget(clientX, clientY);
+    this.#dispatchLabelEvent("ifcviewer:label-drop", {
+      id: marker?.id ?? this._labelDrag.id,
+      clientX,
+      clientY,
+      dropTarget: drop.card || null,
+      elementFromPoint: drop.element || null,
+      reason,
+    }, null);
+  }
+
   #pickModelPoint(clientX, clientY) {
     const model = this.viewer?.activeModel;
     const camera = this.viewer?.camera;
@@ -833,6 +1110,18 @@ export class LabelPlacementController {
     return this._markers.find((m) => String(m?.id) === String(this._selectedId)) || null;
   }
 
+  #handleMarkerClick(marker) {
+    if (!marker) return;
+    this.#closeContextMenu();
+    this.#setSelectedMarker(marker);
+    this.#dispatchLabelEvent("ifcviewer:label-click", {
+      id: marker.id,
+      sceneState: marker.sceneState || null,
+    }, "ifcviewer:card-click");
+    // "Долеталка" камеры: быстрый старт + мягкий конец
+    this.#animateToSceneState(marker.sceneState, 550);
+  }
+
   #buildActionPayload(marker) {
     if (!marker) return null;
     return {
@@ -892,6 +1181,46 @@ export class LabelPlacementController {
     menu.style.display = "none";
   }
 
+  #openCanvasMenu(hit, clientX, clientY) {
+    const menu = this._ui?.canvasMenu;
+    if (!menu || !hit) return;
+
+    this.#closeCanvasMenu();
+
+    this._canvasMenu.open = true;
+    this._canvasMenu.hit = hit;
+
+    if (!this._containerOffsetValid) this.#refreshContainerOffset();
+    const x = clientX - this._containerOffset.left;
+    const y = clientY - this._containerOffset.top;
+
+    menu.style.display = "block";
+    menu.style.left = "0px";
+    menu.style.top = "0px";
+    menu.style.transform = `translate3d(${x}px, ${y}px, 0) translate(8px, 8px)`;
+
+    try {
+      const rect = this.container?.getBoundingClientRect?.();
+      const mw = menu.offsetWidth || 0;
+      const mh = menu.offsetHeight || 0;
+      if (rect && mw && mh) {
+        let px = x + 8;
+        let py = y + 8;
+        if (px + mw > rect.width) px = Math.max(0, rect.width - mw - 4);
+        if (py + mh > rect.height) py = Math.max(0, rect.height - mh - 4);
+        menu.style.transform = `translate3d(${px}px, ${py}px, 0)`;
+      }
+    } catch (_) {}
+  }
+
+  #closeCanvasMenu() {
+    const menu = this._ui?.canvasMenu;
+    if (!menu) return;
+    this._canvasMenu.open = false;
+    this._canvasMenu.hit = null;
+    menu.style.display = "none";
+  }
+
   #createMarkerFromData(data, emitPlacedEvent) {
     if (!data) return null;
     const localPoint = data.localPoint || {};
@@ -912,24 +1241,78 @@ export class LabelPlacementController {
       try { e.preventDefault(); } catch (_) {}
       try { e.stopPropagation(); } catch (_) {}
       try { e.stopImmediatePropagation?.(); } catch (_) {}
+      try {
+        this.logger?.log?.("[LabelDnD]", "marker", {
+          type: e?.type,
+          target: e?.target || null,
+          closestMarker: e?.target?.closest?.(".ifc-label-marker") || null,
+          button: e?.button,
+          buttons: e?.buttons,
+          clientX: e?.clientX,
+          clientY: e?.clientY,
+          defaultPrevented: !!e?.defaultPrevented,
+        });
+      } catch (_) {}
       // если были в режиме постановки — выходим
       try { this.cancelPlacement(); } catch (_) {}
 
       if (e.button === 0) {
         this.#closeContextMenu();
         this.#setSelectedMarker(marker);
-        this.#dispatchLabelEvent("ifcviewer:label-click", {
-          id: marker.id,
-          sceneState: marker.sceneState || null,
-        }, "ifcviewer:card-click");
-        // "Долеталка" камеры: быстрый старт + мягкий конец
-        this.#animateToSceneState(marker.sceneState, 550);
+        this.#beginLabelDrag(marker, e);
       }
     };
     // capture-phase, чтобы обогнать любые handlers на canvas
     try { marker.el.addEventListener("pointerdown", onMarkerPointerDown, { capture: true, passive: false }); } catch (_) {
       try { marker.el.addEventListener("pointerdown", onMarkerPointerDown); } catch (_) {}
     }
+    const onMarkerPointerUp = (e) => {
+      try {
+        this.logger?.log?.("[LabelDnD]", "marker", {
+          type: e?.type,
+          target: e?.target || null,
+          closestMarker: e?.target?.closest?.(".ifc-label-marker") || null,
+          button: e?.button,
+          buttons: e?.buttons,
+          clientX: e?.clientX,
+          clientY: e?.clientY,
+          defaultPrevented: !!e?.defaultPrevented,
+        });
+      } catch (_) {}
+    };
+    try { marker.el.addEventListener("pointerup", onMarkerPointerUp, { capture: true, passive: true }); } catch (_) {
+      try { marker.el.addEventListener("pointerup", onMarkerPointerUp); } catch (_) {}
+    }
+    const onMarkerDragStart = (e) => {
+      try {
+        this.logger?.log?.("[LabelDnD]", "marker", {
+          type: e?.type,
+          target: e?.target || null,
+          closestMarker: e?.target?.closest?.(".ifc-label-marker") || null,
+          button: e?.button,
+          buttons: e?.buttons,
+          clientX: e?.clientX,
+          clientY: e?.clientY,
+          defaultPrevented: !!e?.defaultPrevented,
+        });
+      } catch (_) {}
+    };
+    const onMarkerDragEnd = (e) => {
+      try {
+        this.logger?.log?.("[LabelDnD]", "marker", {
+          type: e?.type,
+          target: e?.target || null,
+          closestMarker: e?.target?.closest?.(".ifc-label-marker") || null,
+          button: e?.button,
+          buttons: e?.buttons,
+          clientX: e?.clientX,
+          clientY: e?.clientY,
+          defaultPrevented: !!e?.defaultPrevented,
+        });
+      } catch (_) {}
+    };
+    try { marker.el.addEventListener("dragstart", onMarkerDragStart); } catch (_) {}
+    try { marker.el.addEventListener("dragend", onMarkerDragEnd); } catch (_) {}
 
     const onMarkerContextMenu = (e) => {
       try { e.preventDefault(); } catch (_) {}

package/src/viewer/Viewer.js

@@ -213,7 +213,7 @@ export class Viewer {
 
     // RMB: перемещение модели относительно "оси" (pivot), pivot остаётся на месте
     this._rmbModelMove = {
-      enabled: true,
+      enabled: false,
       debug: false,
       controller: null,
       pivotAnchor: null, // THREE.Vector3|null (фиксированная ось после ПКМ)