Update viewer_ar.js

viewer_ar.js

@@ -61,13 +61,8 @@
       throw new Error("UMD failed");
     };
 
-    if (esmFirst) {
-      try { return await tryESM(); } catch (_) {}
-      return await tryUMD();
-    } else {
-      try { return await tryUMD(); } catch (_) {}
-      return await tryESM();
-    }
+    if (esmFirst) { try { return await tryESM(); } catch (_) {} return await tryUMD(); }
+    else { try { return await tryUMD(); } catch (_) {} return await tryESM(); }
   }
 
   // =========================
@@ -92,11 +87,12 @@
       font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
       pointer-events: auto; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 8px;
       box-shadow: 0 6px 18px rgba(0,0,0,.25); backdrop-filter: blur(4px);
+      touch-action: none;           /* important pour éviter le scroll/zoom natif */
     }
     .ar-ui .label { font-size: 12px; text-align: center; opacity: 0.9; }
     .ar-ui input[type="range"].rotY {
       -webkit-appearance: none; width: 220px; height: 28px; transform: rotate(-90deg);
-      outline: none; background: transparent; touch-action: none;
+      outline: none; background: transparent; touch-action: none;  /* bloque gestures tactiles */
     }
     .ar-ui input[type="range"].rotY::-webkit-slider-thumb {
       -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
@@ -122,6 +118,7 @@
   }
   const overlayRoot = ensureOverlayRoot();
 
+  // Messages dans l'overlay
   function message(msg) {
     let el = overlayRoot.querySelector(".pc-ar-msg");
     if (!el) {
@@ -253,58 +250,57 @@
 
     // --- Chargement GLB ---
     app.assets.loadFromUrl(GLB_URL, "container", (err, asset) => {
-      if (err) {
-        console.error(err);
-        message("Échec du chargement du modèle GLB.");
-        return;
-      }
-      const instance = asset.resource.instantiateRenderEntity({
-        castShadows: false,
-        receiveShadows: false
-      });
+      if (err) { console.error(err); message("Échec du chargement du modèle GLB."); return; }
+      const instance = asset.resource.instantiateRenderEntity({ castShadows: false, receiveShadows: false });
       modelRoot.addChild(instance);
       modelRoot.setLocalScale(0.2, 0.2, 0.2);
-
       modelLoaded = true;
       message("Modèle chargé. Touchez l’écran pour démarrer l’AR.");
     });
 
     // --- Vérifs WebXR ---
-    if (!app.xr.supported) {
-      message("WebXR n’est pas supporté sur cet appareil.");
-      return;
-    }
+    if (!app.xr.supported) { message("WebXR n’est pas supporté sur cet appareil."); return; }
+
+    // ====== NOUVEAU : gestion anti-fuite d'événements UI ======
+    let uiInteracting = false;
+    const startUIHold = (e) => { uiInteracting = true; e.stopPropagation(); e.preventDefault(); };
+    const endUIHold   = (e) => { uiInteracting = false; e.stopPropagation(); e.preventDefault(); };
+    const swallow     = (e) => { e.stopPropagation(); e.preventDefault(); };
+
+    // Piégeage complet sur le panneau ET le slider
+    ["pointerdown","pointermove","pointerup","pointercancel",
+     "touchstart","touchmove","touchend","touchcancel",
+     "mousedown","mousemove","mouseup","wheel","click"].forEach(evt => {
+       uiPanel.addEventListener(evt, evt === "pointerdown" || evt === "touchstart" || evt === "mousedown" ? startUIHold :
+                                     (evt === "pointerup" || evt === "pointercancel" || evt === "touchend" || evt === "touchcancel" || evt === "mouseup" ? endUIHold : swallow),
+                                     { passive: false });
+       rotYInput.addEventListener(evt, evt === "pointerdown" || evt === "touchstart" || evt === "mousedown" ? startUIHold :
+                                      (evt === "pointerup" || evt === "pointercancel" || evt === "touchend" || evt === "touchcancel" || evt === "mouseup" ? endUIHold : swallow),
+                                      { passive: false });
+    });
 
     // --- Démarrage AR (CameraComponent.startXr + DOM Overlay) ---
     const activateAR = () => {
-      if (!app.xr.isAvailable(pc.XRTYPE_AR)) {
-        message("AR immersive indisponible sur cet appareil.");
-        return;
-      }
+      if (!app.xr.isAvailable(pc.XRTYPE_AR)) { message("AR immersive indisponible sur cet appareil."); return; }
 
       // DOM overlay root (notre conteneur avec slider + messages)
       app.xr.domOverlay.root = document.getElementById("xr-overlay-root");
 
-      // Démarre via la Camera Component (plus compatible selon versions moteur)
       camera.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR, {
         requiredFeatures: ["hit-test", "dom-overlay"],
         domOverlay: { root: app.xr.domOverlay.root },
         callback: (err) => {
-          if (err) {
-            console.error("Échec du démarrage AR :", err);
-            message(`Échec du démarrage AR : ${err.message || err}`);
-          }
+          if (err) { console.error("Échec du démarrage AR :", err); message(`Échec du démarrage AR : ${err.message || err}`); }
         }
       });
     };
 
-    // Premier tap / clic → démarrer AR
-    app.mouse.on("mousedown", () => { if (!app.xr.active) activateAR(); });
+    // Premier tap / clic → démarrer AR (ignorer si on tape sur l'UI)
+    app.mouse.on("mousedown", (e) => { if (!app.xr.active && !uiInteracting) activateAR(); });
     if (app.touch) {
       app.touch.on("touchend", (evt) => {
-        if (!app.xr.active) activateAR();
-        evt.event.preventDefault();
-        evt.event.stopPropagation();
+        if (!app.xr.active && !uiInteracting) activateAR();
+        evt.event.preventDefault(); evt.event.stopPropagation();
       });
     }
 
@@ -325,12 +321,9 @@
             if (modelLoaded && !placedOnce) {
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
-              const euler = new pc.Vec3();
-              rot.getEulerAngles(euler);
-              rotationYDeg = norm360(euler.y);
-              applyRotationY(rotationYDeg);
-              placedOnce = true;
-              rotYInput.disabled = false;
+              const euler = new pc.Vec3(); rot.getEulerAngles(euler);
+              rotationYDeg = norm360(euler.y); applyRotationY(rotationYDeg);
+              placedOnce = true; rotYInput.disabled = false;
               message("Objet placé. Glissez pour déplacer, tournez-le avec le slider →");
             }
           });
@@ -344,32 +337,40 @@
     let lastMouseX = 0;
     const ROTATE_SENSITIVITY = 0.25;
 
-    // Déplacement (input XR : maintien/drag)
+    // Déplacement (input XR : maintien/drag) — IGNORE si UI en cours
     app.xr.input.on("add", (inputSource) => {
       inputSource.on("selectstart", () => {
+        if (uiInteracting) return;              // <<< bloque le drag si doigt sur le slider
         if (!placedOnce || !modelLoaded) return;
+
         inputSource.hitTestStart({
           entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
           callback: (err, transientSource) => {
             if (err) return;
             isDragging = true;
-            transientSource.on("result", (pos) => { if (isDragging) modelRoot.setPosition(pos); });
+
+            transientSource.on("result", (pos) => {
+              if (!isDragging) return;
+              modelRoot.setPosition(pos);
+            });
+
             transientSource.once("remove", () => { isDragging = false; });
           }
         });
       });
+
       inputSource.on("selectend", () => { isDragging = false; });
     });
 
-    // Souris : déplacement (gauche) & rotation (droit ou Shift+gauche)
+    // Souris : déplacement (gauche) & rotation (droit ou Shift+gauche) — IGNORE si UI en cours
     app.mouse.on("mousedown", (e) => {
-      if (!app.xr.active || !placedOnce) return;
+      if (!app.xr.active || !placedOnce || uiInteracting) return;
       if (e.button === 0 && !e.shiftKey) isDragging = true;
       else if (e.button === 2 || (e.button === 0 && e.shiftKey)) { rotateMode = true; lastMouseX = e.x; }
     });
 
     app.mouse.on("mousemove", (e) => {
-      if (!app.xr.active || !placedOnce) return;
+      if (!app.xr.active || !placedOnce || uiInteracting) return;
       if (isDragging) { if (reticle.enabled) modelRoot.setPosition(reticle.getPosition()); }
       else if (rotateMode && modelRoot.enabled) {
         const dx = e.x - lastMouseX; lastMouseX = e.x;
@@ -381,7 +382,7 @@
     window.addEventListener("contextmenu", (e) => e.preventDefault());
 
     // --- Slider rotation (DOM overlay) ---
-    rotYInput.disabled = true;
+    rotYInput.disabled = true; // activé au 1er placement
     rotYInput.addEventListener("input", (e) => {
       if (!modelRoot.enabled) return;
       const deg = parseFloat(e.target.value || "0");