Update viewer_ar.js

viewer_ar.js

@@ -1,7 +1,7 @@
 /* script_ar.js — AR PlayCanvas + GLB HuggingFace
    - Version PC verrouillée
    - WebXR AR Hit Test, placement auto, drag
-   - Rotation Y via SLIDER (DOM Overlay)
+   - Rotation Y via SLIDER (DOM Overlay) avec large zone tactile
    - Aucune dépendance externe autre que PlayCanvas et le GLB
 */
 
@@ -32,10 +32,7 @@
         try {
           const mod = await Promise.race([import(/* @vite-ignore */ url), timeout(loadTimeoutMs)]);
           const namespace = mod?.pc || mod?.default || mod;
-          if (namespace?.Application) {
-            if (!window.pc) window.pc = namespace;
-            return window.pc;
-          }
+          if (namespace?.Application) { if (!window.pc) window.pc = namespace; return window.pc; }
         } catch (_) {}
       }
       throw new Error("ESM failed");
@@ -47,10 +44,8 @@
           await Promise.race([
             new Promise((res, rej) => {
               const s = document.createElement("script");
-              s.src = url;
-              s.async = true;
-              s.onload = () => res();
-              s.onerror = () => rej(new Error("script error"));
+              s.src = url; s.async = true;
+              s.onload = () => res(); s.onerror = () => rej(new Error("script error"));
               document.head.appendChild(s);
             }),
             timeout(loadTimeoutMs)
@@ -85,23 +80,44 @@
       position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
       background: rgba(0,0,0,0.55); color: #fff; padding: 12px 10px; border-radius: 12px;
       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;
+      pointer-events: auto; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 10px;
       box-shadow: 0 6px 18px rgba(0,0,0,.25); backdrop-filter: blur(4px);
-      touch-action: none;           /* important pour éviter le scroll/zoom natif */
+      touch-action: none;
     }
     .ar-ui .label { font-size: 12px; text-align: center; opacity: 0.9; }
+
+    /* GRAND WRAPPER TACTILE (hitbox) */
+    .rotY-wrap {
+      position: relative;
+      width: 60px;           /* largeur tactile confortable */
+      height: 260px;         /* hauteur tactile confortable */
+      display: flex; align-items: center; justify-content: center;
+      touch-action: none;
+    }
+    /* Rail visuel (optionnel) */
+    .rotY-rail {
+      position: absolute; width: 6px; height: 80%;
+      background: rgba(255,255,255,.35); border-radius: 3px;
+    }
+
+    /* Slider réel, tourné, mais on ne dépend PAS de son hitbox */
     .ar-ui input[type="range"].rotY {
-      -webkit-appearance: none; width: 220px; height: 28px; transform: rotate(-90deg);
-      outline: none; background: transparent; touch-action: none;  /* bloque gestures tactiles */
+      -webkit-appearance: none;
+      position: relative;
+      width: 220px; height: 32px;
+      transform: rotate(-90deg);
+      outline: none; background: transparent; touch-action: none;
+      pointer-events: none; /* <- on lit sa valeur mais on ne compte pas sur sa hitbox */
     }
     .ar-ui input[type="range"].rotY::-webkit-slider-thumb {
-      -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
+      -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
       background: #fff; border: none; box-shadow: 0 2px 8px rgba(0,0,0,.35);
     }
     .ar-ui input[type="range"].rotY::-webkit-slider-runnable-track {
       height: 6px; background: rgba(255,255,255,.6); border-radius: 4px;
     }
-    .ar-ui .val { font-size: 11px; opacity: 0.85; }
+
+    .ar-ui .val { font-size: 12px; opacity: 0.9; }
   `;
   const styleTag = document.createElement("style");
   styleTag.textContent = css;
@@ -148,7 +164,10 @@
     panel.className = "ar-ui";
     panel.innerHTML = `
       <div class="label">Rotation</div>
-      <input class="rotY" id="ar-rotY" type="range" min="0" max="360" step="1" value="0" />
+      <div class="rotY-wrap" id="ar-rotY-wrap">
+        <div class="rotY-rail"></div>
+        <input class="rotY" id="ar-rotY" type="range" min="0" max="360" step="1" value="0" />
+      </div>
       <div class="val" id="ar-rotY-val">0°</div>
     `;
     overlayRoot.appendChild(panel);
@@ -176,8 +195,10 @@
     const pc = window.pc;
     const canvas = ensureCanvas();
     const uiPanel = ensureSliderUI();
+
     const rotYInput = uiPanel.querySelector("#ar-rotY");
-    const rotYVal = uiPanel.querySelector("#ar-rotY-val");
+    const rotYVal   = uiPanel.querySelector("#ar-rotY-val");
+    const rotWrap   = uiPanel.querySelector("#ar-rotY-wrap");
 
     window.focus();
 
@@ -261,29 +282,55 @@
     // --- Vérifs WebXR ---
     if (!app.xr.supported) { message("WebXR n’est pas supporté sur cet appareil."); return; }
 
-    // ====== NOUVEAU : gestion anti-fuite d'événements UI ======
+    // ====== Anti-fuite d'événements UI + grande hitbox ======
     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 });
+    let draggingWrap = false;
+
+    const stop = (e) => { e.stopPropagation(); e.preventDefault(); };
+
+    // 1) Empêcher toute propagation depuis le panneau
+    ["pointerdown","pointermove","pointerup","pointercancel","touchstart","touchmove","touchend","touchcancel","mousedown","mousemove","mouseup","wheel","click"].forEach(evt => {
+      uiPanel.addEventListener(evt, stop, { passive: false });
+      rotYInput.addEventListener(evt, stop, { passive: false });
     });
 
+    // 2) Drag custom sur le GRAND WRAPPER vertical
+    function valueFromWrapEvent(ev) {
+      const rect = rotWrap.getBoundingClientRect();
+      const clientY = (ev.touches && ev.touches[0]) ? ev.touches[0].clientY : ev.clientY;
+      const ratio = 1 - ((clientY - rect.top) / rect.height); // 1 en haut, 0 en bas
+      const clamped = Math.max(0, Math.min(1, ratio));
+      return clamped * 360;
+    }
+
+    function beginWrapDrag(e) {
+      uiInteracting = true; draggingWrap = true; stop(e);
+      rotWrap.setPointerCapture?.(e.pointerId || 1);
+      applyRotationY(valueFromWrapEvent(e));
+    }
+    function moveWrapDrag(e) {
+      if (!draggingWrap) return; stop(e);
+      applyRotationY(valueFromWrapEvent(e));
+    }
+    function endWrapDrag(e) {
+      if (!draggingWrap) return; stop(e);
+      draggingWrap = false; uiInteracting = false;
+      try { rotWrap.releasePointerCapture?.(e.pointerId || 1); } catch(_) {}
+    }
+
+    rotWrap.addEventListener("pointerdown", beginWrapDrag, { passive: false });
+    rotWrap.addEventListener("pointermove", moveWrapDrag,   { passive: false });
+    rotWrap.addEventListener("pointerup",   endWrapDrag,    { passive: false });
+    rotWrap.addEventListener("pointercancel", endWrapDrag,  { passive: false });
+
+    rotWrap.addEventListener("touchstart", beginWrapDrag, { passive: false });
+    rotWrap.addEventListener("touchmove",  moveWrapDrag,  { passive: false });
+    rotWrap.addEventListener("touchend",   endWrapDrag,   { passive: false });
+    rotWrap.addEventListener("touchcancel",endWrapDrag,   { 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; }
-
-      // DOM overlay root (notre conteneur avec slider + messages)
       app.xr.domOverlay.root = document.getElementById("xr-overlay-root");
 
       camera.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR, {
@@ -295,8 +342,8 @@
       });
     };
 
-    // Premier tap / clic → démarrer AR (ignorer si on tape sur l'UI)
-    app.mouse.on("mousedown", (e) => { if (!app.xr.active && !uiInteracting) activateAR(); });
+    // Premier tap / clic → démarrer AR (ignorer si UI en cours)
+    app.mouse.on("mousedown", () => { if (!app.xr.active && !uiInteracting) activateAR(); });
     if (app.touch) {
       app.touch.on("touchend", (evt) => {
         if (!app.xr.active && !uiInteracting) activateAR();
@@ -322,7 +369,8 @@
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
               const euler = new pc.Vec3(); rot.getEulerAngles(euler);
-              rotationYDeg = norm360(euler.y); applyRotationY(rotationYDeg);
+              rotationYDeg = (euler.y % 360 + 360) % 360;
+              applyRotationY(rotationYDeg);
               placedOnce = true; rotYInput.disabled = false;
               message("Objet placé. Glissez pour déplacer, tournez-le avec le slider →");
             }
@@ -340,7 +388,7 @@
     // 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 (uiInteracting) return;
         if (!placedOnce || !modelLoaded) return;
 
         inputSource.hitTestStart({
@@ -348,12 +396,7 @@
           callback: (err, transientSource) => {
             if (err) return;
             isDragging = true;
-
-            transientSource.on("result", (pos) => {
-              if (!isDragging) return;
-              modelRoot.setPosition(pos);
-            });
-
+            transientSource.on("result", (pos) => { if (isDragging) modelRoot.setPosition(pos); });
             transientSource.once("remove", () => { isDragging = false; });
           }
         });
@@ -385,8 +428,7 @@
     rotYInput.disabled = true; // activé au 1er placement
     rotYInput.addEventListener("input", (e) => {
       if (!modelRoot.enabled) return;
-      const deg = parseFloat(e.target.value || "0");
-      applyRotationY(deg);
+      applyRotationY(parseFloat(e.target.value || "0"));
     }, { passive: true });
 
     // --- Événements AR globaux ---