@combeenation/3d-viewer 18.0.0 → 18.1.0-beta1

package/src/manager/html-anchor-manager.ts

@@ -82,8 +82,11 @@ export class HtmlAnchorManager {
           parentHtmlElement,
           anchorMesh,
           viewer.scene.activeCamera!,
-          canvas.width,
-          canvas.height,
+          // it's import to use `clientWidth` and `clientHeight` as it makes a difference on mobile devices that have
+          // hardware scaling activated
+          // => `width`/`height` return the upscaled values, but the basis html element for the anchors remains unscaled
+          canvas.clientWidth,
+          canvas.clientHeight,
           1,
           options
         );
@@ -97,9 +100,7 @@ export class HtmlAnchorManager {
    * mesh within the scene.
    */
   public addHtmlAnchor(name: string, htmlElement: HTMLElement, position: Vector3, options?: HtmlAnchorOptions): void {
-    const canvasParentHtmlElement = this.viewer.canvas?.parentElement;
-    if (!canvasParentHtmlElement) {
-      console.warn(`No parent for desired html anchor available`);
+    if (!this.viewer.canvas) {
       return;
     }
 
@@ -120,7 +121,10 @@ export class HtmlAnchorManager {
     if (!enablePointerEvents) {
       parentHtmlElement.style.pointerEvents = 'none';
     }
-    canvasParentHtmlElement.appendChild(parentHtmlElement);
+    // it's important to insert the html anchor elements right after the viewer canvas
+    // otherwise the elements could be in front of other sibling nodes, like the viewer control loading mask
+    // => see CB-10496
+    this.viewer.canvas.insertAdjacentElement('afterend', parentHtmlElement);
 
     // NOTE: creates a sphere with fixed size, which could be problematic in scene with "strange" dimensions
     // add a property for the sphere size if required
@@ -206,7 +210,10 @@ export class HtmlAnchorManager {
       htmlContainer.append(clonedHtmlNode);
 
       // reposition that cloned html element, so that it fits to the desired camera position
-      const baseScale = size.canvasHeight / this.viewer.canvas!.height;
+      // `clientHeight`: makes difference on mobile devices that have hardware scaling activated
+      //                 => `height` returns the upscaled value, but the basis html element for the anchors remains
+      //                     unscaled
+      const baseScale = size.canvasHeight / this.viewer.canvas!.clientHeight;
       this._updateHtmlAnchor(
         clonedHtmlNode,
         anchorMesh,