Update interface.js

interface.js

@@ -1,234 +1,437 @@
-//points.js 
-
-/**
- * initializePoints(options)
- *
- * - options.app: the PlayCanvas App instance
- * - options.cameraEntity: the PlayCanvas camera Entity
- * - options.modelEntity: the main model entity (for any relative positioning; optional)
- * - options.pointsUrl: URL to fetch JSON array of points
- * - options.defaultVisible: boolean: whether points are visible initially
- * - options.moveDuration: number (seconds) for smooth camera move to selected point
- */
-export async function initializePoints(options) {
-  const {
-    app,
-    cameraEntity,
-    modelEntity,
-    pointsUrl,
-    defaultVisible,
-    moveDuration = 0.6
-  } = options;
-
-  if (!app || !cameraEntity || !pointsUrl) {
-    console.error("points.js → missing required initialization options");
-    return;
+// ==============================
+// interface.js
+// ==============================
+
+// Store a reference to the <script> tag that loaded this file
+const currentScriptTag = document.currentScript;
+
+(async function() {
+  // ─── 1. Locate the <script> and read data-config ───────────────────────────────
+  let scriptTag = currentScriptTag;
+  if (!scriptTag) {
+    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')) {
+        scriptTag = scripts[i];
+        break;
+      }
+    }
+    if (!scriptTag && scripts.length > 0) {
+      scriptTag = scripts[scripts.length - 1];
+    }
   }
 
-  // Load JSON of points:
-  let pointsData;
-  try {
-    const resp = await fetch(pointsUrl);
-    pointsData = await resp.json();
-  } catch (e) {
-    console.error("points.js → failed fetching points.json:", e);
+  const configUrl = scriptTag.getAttribute('data-config');
+  let config = {};
+  if (configUrl) {
+    try {
+      const response = await fetch(configUrl);
+      config = await response.json();
+    } catch (error) {
+      console.error("Error loading config file:", error);
+      return;
+    }
+  } else {
+    console.error("No config file provided. Please set a data-config attribute on the <script> tag.");
     return;
   }
-  if (!Array.isArray(pointsData)) {
-    console.error("points.js → points.json must be an array");
-    return;
+
+  // ─── 2. If config.css_url is provided, inject a <link> to that CSS ─────────────
+  if (config.css_url) {
+    const linkEl = document.createElement('link');
+    linkEl.rel = "stylesheet";
+    linkEl.href = config.css_url;
+    document.head.appendChild(linkEl);
   }
 
-  const pointEntities = [];
-
-  // Create a material for info-point spheres
-  const mat = new pc.StandardMaterial();
-  mat.diffuse = new pc.Color(1, 0.8, 0);
-  mat.specular = new pc.Color(1, 1, 1);
-  mat.shininess = 20;
-  mat.update();
-
-  // Build each sphere + attach custom data
-  for (let i = 0; i < pointsData.length; i++) {
-    const pt = pointsData[i];
-    const { x, y, z, text, imageUrl } = pt;
-
-    const sphere = new pc.Entity("point-" + i);
-    sphere.addComponent("model", { type: "sphere" });
-    sphere.model.material = mat;
-
-    // Scale small (primitive sphere radius = 0.5)
-    sphere.setLocalScale(0.05, 0.05, 0.05);
-    sphere.setLocalPosition(x, y, z);
-    sphere.pointData = { text, imageUrl };
-    app.root.addChild(sphere);
-    pointEntities.push(sphere);
+  // ─── 3. Generate a unique instanceId for this widget ───────────────────────────
+  const instanceId = Math.random().toString(36).substr(2, 8);
+
+  // ─── 4. Compute the aspect ratio (padding-bottom %) ────────────────────────────
+  let aspectPercent = "100%";
+  if (config.aspect) {
+    if (config.aspect.includes(":")) {
+      const parts = config.aspect.split(":");
+      const w = parseFloat(parts[0]);
+      const h = parseFloat(parts[1]);
+      if (!isNaN(w) && !isNaN(h) && w > 0) {
+        aspectPercent = (h / w * 100) + "%";
+      }
+    } else {
+      const aspectValue = parseFloat(config.aspect);
+      if (!isNaN(aspectValue) && aspectValue > 0) {
+        aspectPercent = (100 / aspectValue) + "%";
+      }
+    }
+  } else {
+    const parentContainer = scriptTag.parentNode;
+    const containerWidth  = parentContainer.offsetWidth;
+    const containerHeight = parentContainer.offsetHeight;
+    if (containerWidth > 0 && containerHeight > 0) {
+      aspectPercent = (containerHeight / containerWidth * 100) + "%";
+    }
   }
 
-  // Show/hide all point spheres
-  function setPointsVisibility(visible) {
-    pointEntities.forEach(ent => {
-      ent.enabled = visible;
-    });
+  // ─── 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');
+  widgetContainer.style.height = "0";
+  widgetContainer.style.paddingBottom = aspectPercent;
+  widgetContainer.setAttribute('data-original-aspect', aspectPercent);
+
+  // Add the 3D-viewer HTML + 📍 toggle + tooltip markup
+  widgetContainer.innerHTML = `
+    <div id="viewer-container-${instanceId}" class="viewer-container">
+      <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>
+      <button id="points-toggle-${instanceId}" class="widget-button points-toggle">📍</button>
+      <div id="menu-content-${instanceId}" class="menu-content"></div>
+    </div>
+    <div id="point-tooltip" class="point-tooltip" style="display: none;">
+      <div class="point-tooltip-content">
+        <span id="point-tooltip-close" class="point-tooltip-close">×</span>
+        <div id="point-tooltip-text" class="point-tooltip-text"></div>
+        <img id="point-tooltip-image" class="point-tooltip-image" src="" alt="" style="display: none;" />
+      </div>
+    </div>
+  `;
+
+  // Append the widget container immediately after the <script> tag
+  scriptTag.parentNode.appendChild(widgetContainer);
+
+  // ─── 6. Grab references to new DOM elements ──────────────────────────────────
+  const viewerContainerElem = document.getElementById('viewer-container-' + instanceId);
+  const fullscreenToggle    = document.getElementById('fullscreen-toggle-' + instanceId);
+  const helpToggle          = document.getElementById('help-toggle-' + instanceId);
+  const resetCameraBtn      = document.getElementById('reset-camera-btn-' + instanceId);
+  const pointsToggleBtn     = document.getElementById('points-toggle-' + instanceId);
+  const menuContent         = document.getElementById('menu-content-' + instanceId);
+
+  // Tooltip elements
+  const tooltipDiv       = document.getElementById('point-tooltip');
+  const tooltipTextDiv   = document.getElementById('point-tooltip-text');
+  const tooltipImage     = document.getElementById('point-tooltip-image');
+  const tooltipCloseBtn  = document.getElementById('point-tooltip-close');
+
+  // Device detection for help text
+  const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+  const isMobile = isIOS || /Android/i.test(navigator.userAgent);
+  if (isMobile) {
+    menuContent.innerHTML = `
+      - Pour vous déplacer, glissez deux doigts sur l'écran.<br>
+      - Pour orbiter, utilisez un doigt.<br>
+      - Pour zoomer, pincez avec deux doigts.
+    `;
+  } else {
+    menuContent.innerHTML = `
+      - orbitez avec le clic droit<br>
+      - zoomez avec la molette<br>
+      - déplacez vous avec le clic gauche
+    `;
   }
-  setPointsVisibility(!!defaultVisible);
 
-  // Respond to toggle-points event from interface.js
-  document.addEventListener("toggle-points", (evt) => {
-    const { visible } = evt.detail;
-    setPointsVisibility(!!visible);
-  });
+  viewerContainerElem.style.display = 'block';
+
+  // ─── 7. Dynamically load viewer.js ─────────────────────────────────────────
+  let viewerModule;
+  try {
+    viewerModule = await import('./viewer.js');
+    await viewerModule.initializeViewer(config, instanceId);
+  } catch (err) {
+    console.error("Failed to load viewer.js or initialize the 3D viewer:", err);
+    return;
+  }
 
-  // Keep track of any in-flight camera tween so we can cancel it
-  let currentTween = null;
+  // ─── 8. Fullscreen / state-preservation logic ───────────────────────────────
+  let isFullscreen = false;
+  let savedState = null;
+
+  function saveCurrentState() {
+    if (isFullscreen) return;
+    const computedWidget = window.getComputedStyle(widgetContainer);
+    const computedViewer = window.getComputedStyle(viewerContainerElem);
+    const originalAspect = widgetContainer.getAttribute('data-original-aspect') || aspectPercent;
+    const containerWidth  = widgetContainer.offsetWidth;
+    const containerHeight = widgetContainer.clientHeight || viewerContainerElem.offsetHeight;
+    const calculatedRatio = (containerHeight / containerWidth * 100) + '%';
+
+    savedState = {
+      widget: {
+        position:     widgetContainer.style.position,
+        top:          widgetContainer.style.top,
+        left:         widgetContainer.style.left,
+        width:        widgetContainer.style.width,
+        height:       widgetContainer.style.height,
+        maxWidth:     widgetContainer.style.maxWidth,
+        maxHeight:    widgetContainer.style.maxHeight,
+        paddingBottom: widgetContainer.style.paddingBottom || originalAspect,
+        margin:       widgetContainer.style.margin,
+        aspectPercent: originalAspect,
+        calculatedAspect: calculatedRatio,
+        computedWidth:    computedWidget.width,
+        computedHeight:   computedWidget.height,
+        offsetWidth:     containerWidth,
+        offsetHeight:    containerHeight
+      },
+      viewer: {
+        borderRadius: viewerContainerElem.style.borderRadius,
+        border:       viewerContainerElem.style.border,
+        computedWidth:  computedViewer.width,
+        computedHeight: computedViewer.height
+      }
+    };
+  }
 
-  // On mouse down (or touch equivalent), perform manual ray‐sphere intersection
-  app.mouse.on(pc.EVENT_MOUSEDOWN, (event) => {
-    // If a tween is running, cancel it immediately
-    if (currentTween) {
-      app.off("update", currentTween);
-      currentTween = null;
+  function restoreOriginalStyles() {
+    if (!savedState) return;
+    let aspectToUse = aspectPercent;
+    if (savedState.widget.offsetWidth && savedState.widget.offsetHeight) {
+      const actualRatio = (savedState.widget.offsetHeight / savedState.widget.offsetWidth * 100) + '%';
+      aspectToUse = actualRatio;
+    } else if (savedState.widget.calculatedAspect) {
+      aspectToUse = savedState.widget.calculatedAspect;
+    } else if (savedState.widget.aspectPercent) {
+      aspectToUse = savedState.widget.aspectPercent;
+    } else if (savedState.widget.paddingBottom) {
+      aspectToUse = savedState.widget.paddingBottom;
     }
 
-    const x = event.x;
-    const y = event.y;
-    const from = new pc.Vec3();
-    const to   = new pc.Vec3();
-    const camera = cameraEntity.camera;
+    widgetContainer.style.position     = savedState.widget.position    || "";
+    widgetContainer.style.top          = savedState.widget.top         || "";
+    widgetContainer.style.left         = savedState.widget.left        || "";
+    widgetContainer.style.width        = "100%";
+    widgetContainer.style.height       = "0";
+    widgetContainer.style.maxWidth     = savedState.widget.maxWidth    || "";
+    widgetContainer.style.maxHeight    = savedState.widget.maxHeight   || "";
+    widgetContainer.style.paddingBottom= aspectToUse;
+    widgetContainer.style.margin       = savedState.widget.margin      || "";
+    widgetContainer.style.border       = savedState.widget.border      || "";
+    widgetContainer.style.borderRadius = savedState.widget.borderRadius|| "";
+    widgetContainer.style.overflow     = savedState.widget.overflow    || "";
+    widgetContainer.classList.remove('fake-fullscreen');
+
+    viewerContainerElem.style.position    = "absolute";
+    viewerContainerElem.style.top         = "0";
+    viewerContainerElem.style.left        = "0";
+    viewerContainerElem.style.right       = "0";
+    viewerContainerElem.style.bottom      = "0";
+    viewerContainerElem.style.width       = "100%";
+    viewerContainerElem.style.height      = "100%";
+    viewerContainerElem.style.borderRadius= savedState.viewer.borderRadius || "";
+    viewerContainerElem.style.border      = savedState.viewer.border       || "";
+
+    if (viewerModule.app) {
+      const cw = viewerContainerElem.clientWidth;
+      const ch = viewerContainerElem.clientHeight;
+      viewerModule.app.resizeCanvas(cw, ch);
+    }
 
-    cameraEntity.camera.screenToWorld(x, y, camera.nearClip, from);
-    cameraEntity.camera.screenToWorld(x, y, camera.farClip, to);
+    savedState = null;
+  }
 
-    const dir = new pc.Vec3().sub2(to, from).normalize();
+  function applyFullscreenStyles() {
+    widgetContainer.style.position     = 'fixed';
+    widgetContainer.style.top          = '0';
+    widgetContainer.style.left         = '0';
+    widgetContainer.style.width        = '100vw';
+    widgetContainer.style.height       = '100vh';
+    widgetContainer.style.maxWidth     = '100vw';
+    widgetContainer.style.maxHeight    = '100vh';
+    widgetContainer.style.paddingBottom= '0';
+    widgetContainer.style.margin       = '0';
+    widgetContainer.style.border       = 'none';
+    widgetContainer.style.borderRadius = '0';
+
+    viewerContainerElem.style.width       = '100%';
+    viewerContainerElem.style.height      = '100%';
+    viewerContainerElem.style.borderRadius= '0';
+    viewerContainerElem.style.border      = 'none';
+
+    if (viewerModule.app) {
+      viewerModule.app.resizeCanvas(window.innerWidth, window.innerHeight);
+    }
 
-    let closestT = Infinity;
-    let pickedEntity = null;
+    fullscreenToggle.textContent = '⇲';
+    isFullscreen = true;
 
-    for (const ent of pointEntities) {
-      if (!ent.enabled) continue;
+    if (viewerModule.resetViewerCamera) {
+      viewerModule.resetViewerCamera();
+    }
+  }
 
-      const center = ent.getPosition();
-      const worldRadius = 0.5 * ent.getLocalScale().x;
+  function enterFullscreen() {
+    if (!savedState) {
+      saveCurrentState();
+    }
+    if (isIOS) {
+      applyFullscreenStyles();
+      widgetContainer.classList.add('fake-fullscreen');
+    } else {
+      if (widgetContainer.requestFullscreen) {
+        widgetContainer.requestFullscreen()
+          .then(() => {
+            applyFullscreenStyles();
+          })
+          .catch(err => {
+            console.error("Fullscreen request failed:", err);
+            applyFullscreenStyles();
+            widgetContainer.classList.add('fake-fullscreen');
+          });
+      } else if (widgetContainer.webkitRequestFullscreen) {
+        widgetContainer.webkitRequestFullscreen();
+        applyFullscreenStyles();
+      } else if (widgetContainer.mozRequestFullScreen) {
+        widgetContainer.mozRequestFullScreen();
+        applyFullscreenStyles();
+      } else if (widgetContainer.msRequestFullscreen) {
+        widgetContainer.msRequestFullscreen();
+        applyFullscreenStyles();
+      } else {
+        applyFullscreenStyles();
+        widgetContainer.classList.add('fake-fullscreen');
+      }
+    }
+  }
 
-      const oc = new pc.Vec3().sub2(center, from);
-      const tca = oc.dot(dir);
-      if (tca < 0) continue;
+  function exitFullscreen() {
+    if (document.fullscreenElement === widgetContainer) {
+      if (document.exitFullscreen) {
+        document.exitFullscreen().catch(err => {
+          console.error("Error exiting fullscreen:", err);
+        });
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      }
+    }
 
-      const d2 = oc.lengthSq() - (tca * tca);
-      if (d2 > worldRadius * worldRadius) continue;
+    widgetContainer.classList.remove('fake-fullscreen');
+    restoreOriginalStyles();
+    if (viewerModule.resetViewerCamera) {
+      viewerModule.resetViewerCamera();
+    }
+    isFullscreen = false;
+  }
 
-      const thc = Math.sqrt(worldRadius * worldRadius - d2);
-      const t0 = tca - thc;
-      if (t0 < closestT && t0 >= 0) {
-        closestT = t0;
-        pickedEntity = ent;
-      }
+  // ─── 9. Hook up event listeners ───────────────────────────────────────────
+
+  fullscreenToggle.addEventListener('click', () => {
+    if (!isFullscreen) {
+      enterFullscreen();
+    } else {
+      exitFullscreen();
     }
+  });
 
-    if (pickedEntity) {
-      const { text, imageUrl } = pickedEntity.pointData;
-      document.dispatchEvent(new CustomEvent("point-selected", {
-        detail: { text, imageUrl }
-      }));
-      tweenCameraToPoint(pickedEntity, moveDuration);
+  document.addEventListener('fullscreenchange', () => {
+    if (document.fullscreenElement === widgetContainer) {
+      isFullscreen = true;
+      applyFullscreenStyles();
+    } else if (isFullscreen) {
+      isFullscreen = false;
+      restoreOriginalStyles();
+    }
+  });
+  document.addEventListener('webkitfullscreenchange', () => {
+    if (document.webkitFullscreenElement === widgetContainer) {
+      isFullscreen = true;
+      applyFullscreenStyles();
+    } else if (isFullscreen) {
+      isFullscreen = false;
+      restoreOriginalStyles();
+    }
+  });
+  document.addEventListener('mozfullscreenchange', () => {
+    if (document.mozFullScreenElement === widgetContainer) {
+      isFullscreen = true;
+      applyFullscreenStyles();
+    } else if (isFullscreen) {
+      isFullscreen = false;
+      restoreOriginalStyles();
+    }
+  });
+  document.addEventListener('MSFullscreenChange', () => {
+    if (document.msFullscreenElement === widgetContainer) {
+      isFullscreen = true;
+      applyFullscreenStyles();
+    } else if (isFullscreen) {
+      isFullscreen = false;
+      restoreOriginalStyles();
     }
   });
 
-  // Also close tooltip if user interacts (mouse or touch) on the canvas
-  const canvasId = app.graphicsDevice.canvas.id;
-  const htmlCanvas = document.getElementById(canvasId);
-  if (htmlCanvas) {
-    htmlCanvas.addEventListener("mousedown", () => {
-      document.dispatchEvent(new CustomEvent("hide-tooltip"));
-    });
-    htmlCanvas.addEventListener("touchstart", () => {
-      document.dispatchEvent(new CustomEvent("hide-tooltip"));
-    });
-  }
+  helpToggle.addEventListener('click', (e) => {
+    e.stopPropagation();
+    menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
+  });
 
-  // Tween helper: smoothly move and reorient camera to focus the chosen point entity
-  function tweenCameraToPoint(pointEnt, duration) {
-    const orbitCam = cameraEntity.script.orbitCamera;
-    if (!orbitCam) return;
-
-    // Compute target pivot exactly at the sphere center
-    const targetPos = pointEnt.getPosition().clone();
-    // Compute current state
-    const startPivot   = orbitCam.pivotPoint.clone();
-    const startYaw     = orbitCam._yaw;
-    const startPitch   = orbitCam._pitch;
-    const startDist    = orbitCam._distance;
-
-    // Compute direction & candidate distance:
-    const worldRadius  = 0.5 * pointEnt.getLocalScale().x;
-    const minZoom = orbitCam.distanceMin;
-    const desiredDistance = Math.max(minZoom * 1.2, worldRadius * 4);
-
-    // Compute target yaw/pitch from camera pointing at targetPos
-    // Reuse reset logic: place a temp entity at camera’s current position, have it look at target
-    const camWorldPos = cameraEntity.getPosition().clone();
-    const tempEnt = new pc.Entity();
-    tempEnt.setPosition(camWorldPos);
-    tempEnt.lookAt(targetPos);
-    const rotation = tempEnt.getRotation();
-    const forward = new pc.Vec3();
-    rotation.transformVector(pc.Vec3.FORWARD, forward);
-    const tgtYaw = Math.atan2(-forward.x, -forward.z) * pc.math.RAD_TO_DEG;
-    const yawQuat = new pc.Quat().setFromEulerAngles(0, -tgtYaw, 0);
-    const rotNoYaw = new pc.Quat().mul2(yawQuat, rotation);
-    const fNoYaw = new pc.Vec3();
-    rotNoYaw.transformVector(pc.Vec3.FORWARD, fNoYaw);
-    const tgtPitch = Math.atan2(fNoYaw.y, -fNoYaw.z) * pc.math.RAD_TO_DEG;
-    tempEnt.destroy();
-
-    // Target state:
-    const endPivot   = targetPos.clone();
-    const endYaw     = tgtYaw;
-    const endPitch   = tgtPitch;
-    const endDist    = desiredDistance;
-
-    let elapsed = 0;
-    const orgPivot = startPivot.clone();
-    const orgYaw   = startYaw;
-    const orgPitch = startPitch;
-    const orgDist  = startDist;
-
-    // If another tween is running, cancel it
-    if (currentTween) {
-      app.off("update", currentTween);
-      currentTween = null;
-    }
-
-    // Per-frame update
-    function lerpUpdate(dt) {
-      elapsed += dt;
-      const t = Math.min(elapsed / duration, 1);
-
-      // Interpolate pivot (vector lerp)
-      const newPivot = new pc.Vec3().lerp(orgPivot, endPivot, t);
-      orbitCam.pivotPoint.copy(newPivot);
-
-      // Interpolate yaw/pitch/distance (simple lerp)
-      const newYaw   = pc.math.lerp(orgYaw,   endYaw,   t);
-      const newPitch = pc.math.lerp(orgPitch, endPitch, t);
-      const newDist  = pc.math.lerp(orgDist,  endDist,  t);
-
-      orbitCam._targetYaw     = newYaw;
-      orbitCam._yaw           = newYaw;
-      orbitCam._targetPitch   = newPitch;
-      orbitCam._pitch         = newPitch;
-      orbitCam._targetDistance = newDist;
-      orbitCam._distance      = newDist;
-
-      orbitCam._updatePosition();
-
-      if (t >= 1) {
-        app.off("update", lerpUpdate);
-        currentTween = null;
-      }
+  resetCameraBtn.addEventListener('click', () => {
+    if (viewerModule.resetViewerCamera) {
+      viewerModule.resetViewerCamera();
     }
+  });
 
-    currentTween = lerpUpdate;
-    app.on("update", lerpUpdate);
+  // 📍 toggle button
+  let pointsVisible = !!config.showPointsDefault;
+  if (!pointsVisible) {
+    pointsToggleBtn.style.opacity = '0.5';
   }
-}
+  pointsToggleBtn.addEventListener('click', () => {
+    pointsVisible = !pointsVisible;
+    pointsToggleBtn.style.opacity = pointsVisible ? '1' : '0.5';
+    document.dispatchEvent(new CustomEvent('toggle-points', { detail: { visible: pointsVisible } }));
+  });
+
+  // Close tooltip on button click
+  tooltipCloseBtn.addEventListener('click', () => {
+    tooltipDiv.style.display = 'none';
+  });
+
+  // Listen for point-selection events and show tooltip
+  document.addEventListener('point-selected', (evt) => {
+    const { text, imageUrl } = evt.detail;
+    tooltipTextDiv.textContent = text || "";
+    if (imageUrl) {
+      tooltipImage.src = imageUrl;
+      tooltipImage.style.display = 'block';
+    } else {
+      tooltipImage.style.display = 'none';
+    }
+    tooltipDiv.style.display = 'flex';
+  });
+
+  // Escape key also exits fullscreen
+  document.addEventListener('keydown', (e) => {
+    if ((e.key === 'Escape' || e.key === 'Esc') && isFullscreen) {
+      exitFullscreen();
+    }
+  });
+
+  // Window resize → resize PlayCanvas canvas
+  window.addEventListener('resize', () => {
+    if (isFullscreen && viewerModule.app) {
+      viewerModule.app.resizeCanvas(window.innerWidth, window.innerHeight);
+    } else if (viewerModule.app) {
+      const cw = viewerContainerElem.clientWidth;
+      const ch = viewerContainerElem.clientHeight;
+      viewerModule.app.resizeCanvas(cw, ch);
+    }
+  });
+
+  // Save “initial state” after a brief delay
+  setTimeout(() => {
+    saveCurrentState();
+    document.dispatchEvent(new CustomEvent('toggle-points', { detail: { visible: pointsVisible } }));
+  }, 200);
+
+})();