Update interface.js

interface.js

@@ -9,7 +9,6 @@ const currentScriptTag = document.currentScript;
   // ─── 1. Locate the <script> and read data-config ───────────────────────────────
   let scriptTag = currentScriptTag;
   if (!scriptTag) {
-    // Fallback: scan all <script> tags for one whose src includes "interface.js" and has data-config
     const scripts = document.getElementsByTagName('script');
     for (let i = 0; i < scripts.length; i++) {
       if (scripts[i].src.includes('interface.js') && scripts[i].hasAttribute('data-config')) {
@@ -65,7 +64,6 @@ const currentScriptTag = document.currentScript;
       }
     }
   } else {
-    // If no aspect in config, base it on the parent’s dimensions
     const parentContainer = scriptTag.parentNode;
     const containerWidth  = parentContainer.offsetWidth;
     const containerHeight = parentContainer.offsetHeight;
@@ -74,7 +72,7 @@ const currentScriptTag = document.currentScript;
     }
   }
 
-  // ─── 5. Create the widget container (no GIF preview anymore) ──────────────────
+  // ─── 5. Create the widget container (no GIF preview, no close button) ─────────
   const widgetContainer = document.createElement('div');
   widgetContainer.id = 'ply-widget-container-' + instanceId;
   widgetContainer.classList.add('ply-widget-container');
@@ -82,7 +80,7 @@ const currentScriptTag = document.currentScript;
   widgetContainer.style.paddingBottom = aspectPercent;
   widgetContainer.setAttribute('data-original-aspect', aspectPercent);
 
-  // Insert only the 3D-viewer-related HTML (no GIF portion, no close button):
+  // Inject only the 3D-viewer-related HTML plus the new "points-toggle" button:
   widgetContainer.innerHTML = `
     <div id="viewer-container-${instanceId}" class="viewer-container">
       <div id="progress-dialog-${instanceId}" class="progress-dialog">
@@ -90,6 +88,7 @@ const currentScriptTag = document.currentScript;
       </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="points-toggle-${instanceId}" class="widget-button points-toggle">📍</button>
       <button id="reset-camera-btn-${instanceId}" class="widget-button reset-camera-btn">
         <span class="reset-icon">⟲</span>
       </button>
@@ -97,13 +96,13 @@ const currentScriptTag = document.currentScript;
     </div>
   `;
 
-  // Append the widget container right after the <script> tag
   scriptTag.parentNode.appendChild(widgetContainer);
 
   // ─── 6. Grab references to newly created DOM elements ─────────────────────────
   const viewerContainerElem = document.getElementById('viewer-container-' + instanceId);
   const fullscreenToggle    = document.getElementById('fullscreen-toggle-' + instanceId);
   const helpToggle          = document.getElementById('help-toggle-' + instanceId);
+  const pointsToggle        = document.getElementById('points-toggle-' + instanceId);
   const resetCameraBtn      = document.getElementById('reset-camera-btn-' + instanceId);
   const menuContent         = document.getElementById('menu-content-' + instanceId);
 
@@ -137,13 +136,32 @@ const currentScriptTag = document.currentScript;
     return;
   }
 
-  // ─── 8. Full-screen / state-saving machinery ─────────────────────────────────
+  // ─── 8. Hook up the new Points‐Toggle logic ───────────────────────────────────
+  let pointsVisible = Boolean(config.showPointsDefault);
+  // Set initial visibility from config:
+  viewerModule.toggleInfopoints(pointsVisible);
+  // Style the button to reflect its state (e.g. .active class or opacity):
+  if (pointsVisible) {
+    pointsToggle.classList.add('active');
+  } else {
+    pointsToggle.classList.remove('active');
+  }
+  pointsToggle.addEventListener('click', () => {
+    pointsVisible = !pointsVisible;
+    viewerModule.toggleInfopoints(pointsVisible);
+    if (pointsVisible) {
+      pointsToggle.classList.add('active');
+    } else {
+      pointsToggle.classList.remove('active');
+    }
+  });
+
+  // ─── 9. Other UI event listeners (fullscreen, help, reset-camera) ───────────
   let isFullscreen = false;
   let savedState = null;
 
   function saveCurrentState() {
-    if (isFullscreen) return; // don’t overwrite if already in fullscreen
-
+    if (isFullscreen) return;
     const computedWidget = window.getComputedStyle(widgetContainer);
     const computedViewer = window.getComputedStyle(viewerContainerElem);
     const originalAspect = widgetContainer.getAttribute('data-original-aspect') || aspectPercent;
@@ -181,7 +199,6 @@ const currentScriptTag = document.currentScript;
   function restoreOriginalStyles() {
     if (!savedState) return;
 
-    // Determine which aspect to use on restore
     let aspectToUse = aspectPercent;
     if (savedState.widget.offsetWidth && savedState.widget.offsetHeight) {
       const actualRatio = (savedState.widget.offsetHeight / savedState.widget.offsetWidth * 100) + '%';
@@ -199,7 +216,7 @@ const currentScriptTag = document.currentScript;
     widgetContainer.style.top         = savedState.widget.top         || "";
     widgetContainer.style.left        = savedState.widget.left        || "";
     widgetContainer.style.width       = "100%";
-    widgetContainer.style.height      = "0"; // always 0 because we rely on padding-bottom
+    widgetContainer.style.height      = "0";
     widgetContainer.style.maxWidth    = savedState.widget.maxWidth    || "";
     widgetContainer.style.maxHeight   = savedState.widget.maxHeight   || "";
     widgetContainer.style.paddingBottom = aspectToUse;
@@ -220,7 +237,6 @@ const currentScriptTag = document.currentScript;
     viewerContainerElem.style.borderRadius = savedState.viewer.borderRadius || "";
     viewerContainerElem.style.border       = savedState.viewer.border       || "";
 
-    // If the PlayCanvas app still exists, resize its canvas back to the container’s dimensions
     if (viewerModule.app) {
       const cw = viewerContainerElem.clientWidth;
       const ch = viewerContainerElem.clientHeight;
@@ -255,7 +271,6 @@ const currentScriptTag = document.currentScript;
     fullscreenToggle.textContent = '⇲';
     isFullscreen = true;
 
-    // After going fullscreen, reset the camera so it fits the new view
     if (viewerModule.resetViewerCamera) {
       viewerModule.resetViewerCamera();
     }
@@ -290,7 +305,6 @@ const currentScriptTag = document.currentScript;
         widgetContainer.msRequestFullscreen();
         applyFullscreenStyles();
       } else {
-        // Fallback: fake-fullscreen
         applyFullscreenStyles();
         widgetContainer.classList.add('fake-fullscreen');
       }
@@ -320,8 +334,6 @@ const currentScriptTag = document.currentScript;
     isFullscreen = false;
   }
 
-  // ─── 9. Hook up all event listeners ───────────────────────────────────────────
-
   // Fullscreen toggle button
   fullscreenToggle.addEventListener('click', function() {
     if (!isFullscreen) {