Update interface.js

interface.js

@@ -72,57 +72,35 @@ const currentScriptTag = document.currentScript;
   widgetContainer.style.paddingBottom = aspectPercent;
   widgetContainer.setAttribute('data-original-aspect', aspectPercent);
 
+  // --- BEGIN CONTROL BUTTONS (in .viewer-controls for vertical stacking) ---
   const tooltipsButtonHTML = config.tooltips_url
-    ? `<button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle">⦿</button>`
+    ? `<button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle" title="Tooltips">⦿</button>`
     : '';
 
-  // ----------------- COLOR BUTTONS (will be inserted after the main viewer controls) ----------------------
-  const colorBtnContainerId = `color-btn-container-${instanceId}`;
-  // Only red and white for now. Extend array to add more colors later.
+  // --- COLOR BUTTONS (easy to add more here) ---
   const colorButtonsConfig = [
-    {
-      id: `color-btn-white-${instanceId}`,
-      label: '',
-      title: 'Blanc',
-      color: [1, 1, 1],
-      style: 'background: #fff; border: 1.5px solid #bbb;'
-    },
-    {
-      id: `color-btn-red-${instanceId}`,
-      label: '',
-      title: 'Rouge',
-      color: [0.7, 0.05, 0.05],
-      style: 'background: #d00; border: 1.5px solid #b33;'
-    }
+    { id: `color-btn-white-${instanceId}`, title: "Blanc", rgb: [1, 1, 1] },
+    { id: `color-btn-red-${instanceId}`,   title: "Rouge", rgb: [0.7, 0.05, 0.05] }
+    // Add more as desired
   ];
-  // The colorBtnContainer is inserted into the widget HTML
-  const colorButtonsHTML = `
-    <div id="${colorBtnContainerId}" class="color-btn-container">
-      ${colorButtonsConfig.map(btn => `
-        <button
-          id="${btn.id}"
-          class="widget-button color-btn"
-          title="${btn.title}"
-          style="${btn.style}; right: 172px; width: 32px; height: 32px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center;"
-          tabindex="0"
-        ></button>
-      `).join('\n')}
-    </div>
-  `;
-  // ---------------------------------
+  const colorButtonsHTML = colorButtonsConfig.map(btn =>
+    `<button id="${btn.id}" class="widget-button color-btn" title="${btn.title}" tabindex="0"></button>`
+  ).join('\n');
 
   widgetContainer.innerHTML = `
     <div id="viewer-container-${instanceId}" class="viewer-container">
+      <div class="viewer-controls">
+        <button id="fullscreen-toggle-${instanceId}" class="widget-button fullscreen-toggle" title="Plein écran">⇱</button>
+        <button id="help-toggle-${instanceId}" class="widget-button help-toggle" title="Aide">?</button>
+        <button id="reset-camera-btn-${instanceId}" class="widget-button reset-camera-btn" title="Réinitialiser la caméra">
+          <span class="reset-icon">⟲</span>
+        </button>
+        ${tooltipsButtonHTML}
+        ${colorButtonsHTML}
+      </div>
       <div id="progress-dialog-${instanceId}" class="progress-dialog">
         <progress id="progress-indicator-${instanceId}" max="100" value="0"></progress>
       </div>
-      <button id="fullscreen-toggle-${instanceId}" class="widget-button fullscreen-toggle">⇱</button>
-      <button id="help-toggle-${instanceId}" class="widget-button help-toggle">?</button>
-      <button id="reset-camera-btn-${instanceId}" class="widget-button reset-camera-btn">
-        <span class="reset-icon">⟲</span>
-      </button>
-      ${tooltipsButtonHTML}
-      ${colorButtonsHTML}
       <div id="menu-content-${instanceId}" class="menu-content">
         <span id="help-close-${instanceId}" class="help-close">×</span>
         <div class="help-text"></div>
@@ -152,9 +130,8 @@ const currentScriptTag = document.currentScript;
   const tooltipImage        = document.getElementById('tooltip-image');
   const tooltipCloseBtn     = document.getElementById('tooltip-close');
 
-  // Get color button DOM elements (by ID)
-  const colorBtnContainer = document.getElementById(colorBtnContainerId);
-  const colorBtnElements = colorButtonsConfig.map(btn => document.getElementById(btn.id));
+  // Color button elements
+  const colorButtonElems = colorButtonsConfig.map(btn => document.getElementById(btn.id));
 
   const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
@@ -164,7 +141,7 @@ const currentScriptTag = document.currentScript;
     : '';
 
   if (isMobile) {
-    helpTextDiv.innerHTML =
+    helpTextDiv.innerHTML = 
       '- Déplacez vous en glissant deux doigts sur l\'écran.<br>' +
       '- Orbitez en glissant un doigt.<br>' +
       '- Zoomez en pinçant avec deux doigts.<br>' +
@@ -172,7 +149,7 @@ const currentScriptTag = document.currentScript;
       '- Cliquez sur ⟲ pour réinitialiser la caméra.<br>' +
       '- Cliquez sur ⇱ pour passer en plein écran.<br>';
   } else {
-    helpTextDiv.innerHTML =
+    helpTextDiv.innerHTML = 
       '- Orbitez avec le clic droit<br>' +
       '- Zoomez avec la molette<br>' +
       '- Déplacez vous avec le clic gauche<br>' +
@@ -423,19 +400,16 @@ const currentScriptTag = document.currentScript;
 
   tooltipCloseBtn.addEventListener('click', hideTooltipPanel);
 
-  // ----------------- COLOR BUTTON LOGIC (click handler) -----------------
-  colorBtnElements.forEach((btnEl, idx) => {
-    if (!btnEl) return;
-    btnEl.addEventListener('click', (e) => {
-      e.preventDefault();
-      // Defensive: Wait until changeColor function is available and model loaded
-      if (viewerModule && typeof viewerModule.changeColor === 'function') {
-        const [r, g, b] = colorButtonsConfig[idx].color;
+  // ========== COLOR BUTTON LOGIC ==========
+  colorButtonElems.forEach((btnElem, idx) => {
+    btnElem.addEventListener('click', () => {
+      if (viewerModule && viewerModule.changeColor) {
+        const [r, g, b] = colorButtonsConfig[idx].rgb;
         viewerModule.changeColor(r, g, b);
       }
     });
   });
-  // ----------------------------------------------------------------------
+  // ========================================
 
   document.addEventListener('tooltip-selected', (evt) => {
     // Always show panel, cancel hide first