fix: overhaul examples mobile view

examples/iframe/loader.mjs

@@ -2,6 +2,7 @@ import files from './files.mjs';
 import MiniStats from './ministats.mjs';
 import { fetchFile, importModule, clearImports, parseConfig, fire } from './runtime.mjs';
 import { data, deviceType as selectedDeviceType, refreshContext, updateDeviceType } from './state.mjs';
+import { blockZoom } from './zoom.mjs';
 
 /** @import { AppBase } from 'playcanvas' */
 
@@ -68,7 +69,6 @@ class ExampleLoader {
                 console.warn('No canvas found.');
                 return;
             }
-            this.setMiniStats(true);
         }
 
         if (!this._started) {
@@ -91,6 +91,7 @@ class ExampleLoader {
             const reportedType = (isWebGPU(selectedDeviceType) && engineType === 'webgpu') ?
                 selectedDeviceType :
                 engineType;
+            window.top.activeGraphicsDevice = reportedType;
             fire('updateActiveDevice', { deviceType: reportedType });
         }
 
@@ -157,6 +158,8 @@ class ExampleLoader {
      * @param {{ engineUrl: string, fileNames: string[], config?: Record<string, any> }} options - Options to start the loader
      */
     async start({ engineUrl, fileNames, config = {} }) {
+        blockZoom();
+
         this._baseConfig = config;
         this._fileNames = fileNames;
 
@@ -254,9 +257,10 @@ class ExampleLoader {
      */
     setMiniStats(enabled = false) {
         if (this._config.NO_MINISTATS) {
+            fire('miniStats', { state: false });
             return;
         }
-        MiniStats.enable(this._app, enabled);
+        fire('miniStats', { state: MiniStats.enable(this._app, enabled) });
     }
 
     hotReload() {

examples/iframe/ministats.mjs

@@ -11,30 +11,32 @@ export default class MiniStats {
     /**
      * @param {AppBase} app - The app instance.
      * @param {any} state - The enabled state.
+     * @returns {boolean} The resolved MiniStats enabled state.
      */
     static enable(app, state) {
         if (params.miniStats === 'false') {
-            return;
+            return false;
         }
         if (typeof window.pc === 'undefined') {
-            return;
+            return false;
         }
         if (!app) {
-            return;
+            return false;
         }
         const deviceType = app?.graphicsDevice?.deviceType;
         if (deviceType === 'null') {
-            return;
+            return false;
         }
         if (state) {
             if (!MiniStats.instance) {
                 MiniStats.instance = new window.pc.MiniStats(app);
             }
         }
         if (!MiniStats.instance) {
-            return;
+            return false;
         }
         MiniStats.instance.enabled = state;
+        return MiniStats.instance.enabled;
     }
 
     static destroy() {

examples/iframe/zoom.mjs

@@ -0,0 +1,31 @@
+let blocked = false;
+
+const blockZoom = () => {
+    if (blocked || !matchMedia('(pointer: coarse)').matches) {
+        return;
+    }
+
+    blocked = true;
+    let last = 0;
+
+    document.addEventListener('touchmove', (event) => {
+        if (event.touches.length > 1) {
+            event.preventDefault();
+        }
+    }, { passive: false });
+
+    document.addEventListener('touchend', (event) => {
+        const now = Date.now();
+        if (now - last < 300) {
+            event.preventDefault();
+        }
+        last = now;
+    }, { passive: false });
+
+    document.addEventListener('dblclick', event => event.preventDefault(), { passive: false });
+    document.addEventListener('gesturestart', event => event.preventDefault(), { passive: false });
+    document.addEventListener('gesturechange', event => event.preventDefault(), { passive: false });
+    document.addEventListener('gestureend', event => event.preventDefault(), { passive: false });
+};
+
+export { blockZoom };

examples/src/app/components/DeviceSelector.mjs

@@ -25,6 +25,12 @@ const deviceTypeNames = {
     [DEVICETYPE_NULL]: 'Null'
 };
 
+/**
+ * @param {string | null | undefined} value - Device type value.
+ * @returns {string | undefined} The valid device type.
+ */
+const validDeviceType = value => (value && deviceTypeNames[value] ? value : undefined);
+
 /**
  * @typedef {object} Props
  * @property {Function} onSelect - On select handler.
@@ -45,7 +51,7 @@ class DeviceSelector extends TypedComponent {
     state = {
         fallbackOrder: null,
         disabledOptions: null,
-        activeDevice: this.preferredGraphicsDevice
+        activeDevice: this.activeGraphicsDevice
     };
 
     /**
@@ -66,6 +72,10 @@ class DeviceSelector extends TypedComponent {
 
     componentDidMount() {
         window.addEventListener('updateActiveDevice', this._handleUpdateDevice);
+        const activeDevice = validDeviceType(window.activeGraphicsDevice);
+        if (activeDevice) {
+            this.onSetActiveGraphicsDevice(activeDevice);
+        }
     }
 
     componentWillUnmount() {
@@ -93,7 +103,16 @@ class DeviceSelector extends TypedComponent {
      * @returns {string | undefined} The preferred graphics device.
      */
     get preferredGraphicsDevice() {
-        return window.preferredGraphicsDevice;
+        return validDeviceType(window.preferredGraphicsDevice) ??
+            validDeviceType(localStorage.getItem('preferredGraphicsDevice')) ??
+            DEVICETYPE_WEBGL2;
+    }
+
+    /**
+     * @returns {string | undefined} The active graphics device.
+     */
+    get activeGraphicsDevice() {
+        return validDeviceType(window.activeGraphicsDevice) ?? this.preferredGraphicsDevice;
     }
 
     /**