[Examples Browser] Support device type switching

examples/package.json

@@ -48,13 +48,14 @@
     "@monaco-editor/react": "^4.4.5",
     "@playcanvas/eslint-config": "^1.1.1",
     "@playcanvas/observer": "1.3.6",
-    "@playcanvas/pcui": "^4.0.0",
+    "@playcanvas/pcui": "^4.0.3",
     "@rollup/plugin-alias": "^4.0.2",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@types/react": "^17.0.13",
     "@types/react-dom": "^17.0.8",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^5.26.0",
     "@typescript-eslint/parser": "^5.26.0",
     "concurrently": "^7.2.1",

examples/scripts/iframe/index.mjs

@@ -53,6 +53,7 @@ function buildExample(category, filename) {
     fs.writeFileSync(`${MAIN_DIR}/dist/iframe/${category}/${filename.replace(".tsx", "")}.html`, loadHtmlTemplate({
         exampleClass: exampleClass,
         enginePath: process.env.ENGINE_PATH || enginePath,
+        webgpuEnabled: formatters.getWebgpuEnabledFromClass(exampleClass),
         miniStats: !formatters.classIncludesMiniStats(exampleClass)
     }));
 }

examples/scripts/iframe/index.mustache

@@ -62,7 +62,7 @@
                     presets: ["react", "typescript", "env"]
                 }).code;
             }
-            window.exampleFunction = new Function('canvas', 'data', exampleFunction);
+            window.exampleFunction = new Function('canvas', 'deviceType', 'data', exampleFunction);
         }
         window.loadFunction = example.load;
         window.files = window.top.editedFiles || example.constructor.FILES;
@@ -181,6 +181,14 @@
                     return data;
                 } else if (arg === 'pcx') {
                     return pcx;
+                } else if (arg === 'deviceType') {
+                    if ({{{webgpuEnabled}}}) {
+                        return window.top.preferredGraphicsDevice || 'webgpu';
+                    } else if (['webgl1', 'webgl2'].includes(window.top.preferredGraphicsDevice)) {
+                        return window.top.preferredGraphicsDevice;
+                    } else {
+                        return 'webgl2';
+                    }
                 }
             });
             window.exampleFunction.apply(this, args);

examples/src/app/code-editor.tsx

@@ -140,7 +140,8 @@ const CodeEditor = (props: CodeEditorProps) => {
             options={{
                 scrollbar: {
                     horizontal: 'visible'
-                }
+                },
+                readOnly: false
             }}
         />
     </Panel>;

examples/src/app/constants.ts

@@ -0,0 +1 @@
+export const MIN_DESKTOP_WIDTH = 601;

examples/src/app/control-panel.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import MonacoEditor from "@monaco-editor/react";
-import { Button, Container, Panel } from '@playcanvas/pcui/react';
+import { Button, Container } from '@playcanvas/pcui/react';
+import { MIN_DESKTOP_WIDTH } from './constants';
 
 const ControlPanel = (props: any) => {
     const [state, setState] = useState({
         showParameters: false,
         showCode: true,
-        collapsed: window.top.innerWidth < 601
+        collapsed: window.top.innerWidth < MIN_DESKTOP_WIDTH
     });
     const onClickParametersTab = () => {
         if (document.getElementById('paramButton').classList.contains('selected')) {
@@ -17,8 +18,8 @@ const ControlPanel = (props: any) => {
             showCode: false,
             collapsed: false
         });
-        document.getElementById('paramButton').classList.toggle('selected');
-        document.getElementById('codeButton').classList.toggle('selected');
+        document.getElementById('paramButton').classList.add('selected');
+        document.getElementById('codeButton').classList.remove('selected');
         const controls = document.getElementById('controlPanel-controls');
         controls.classList.remove('pcui-hidden');
     };
@@ -31,14 +32,14 @@ const ControlPanel = (props: any) => {
             showCode: true,
             collapsed: false
         });
-        document.getElementById('paramButton').classList.toggle('selected');
-        document.getElementById('codeButton').classList.toggle('selected');
+        document.getElementById('paramButton').classList.remove('selected');
+        document.getElementById('codeButton').classList.add('selected');
         const controls = document.getElementById('controlPanel-controls');
         controls.classList.add('pcui-hidden');
     };
 
     useEffect(() => {
-        if (window.top.innerWidth < 601) {
+        if (window.top.innerWidth < MIN_DESKTOP_WIDTH) {
             // @ts-ignore
             document.getElementById('controlPanel-controls').ui.hidden = true;
         }
@@ -48,24 +49,24 @@ const ControlPanel = (props: any) => {
         }
     });
 
-    return <Panel id='controlPanel' class={[window.top.innerWidth > 600 && !props.controls ? 'empty' : 'null', window.top.innerWidth < 601 ? 'mobile' : null]} resizable='top' headerText={window.top.innerWidth < 601 ? (props.controls ? 'CODE & CONTROLS' : 'CODE') : 'CONTROLS'} collapsible={true} collapsed={state.collapsed}>
-        { window.top.innerWidth < 601 && props.controls && <Container id= 'controlPanel-tabs' class='tabs-container'>
+    return <Container id='controls-wrapper' class={props.controls ? 'has-controls' : null}>
+        { window.top.innerWidth < MIN_DESKTOP_WIDTH && props.controls && <Container id= 'controlPanel-tabs' class='tabs-container'>
             <Button text='CODE' id='codeButton' class={state.showCode ? 'selected' : null} onClick={onClickCodeTab}/>
             <Button text='PARAMETERS' class={state.showParameters ? 'selected' : null} id='paramButton' onClick={onClickParametersTab} />
         </Container>
         }
         <Container id='controlPanel-controls'>
             { props.controls }
         </Container>
-        { window.top.innerWidth < 601 && state.showCode && <MonacoEditor
+        { window.top.innerWidth < MIN_DESKTOP_WIDTH && state.showCode && <MonacoEditor
             options={{
                 readOnly: true
             }}
             defaultLanguage="typescript"
             value={props.files ? props.files[0].text : ''}
         />
         }
-    </Panel>;
+    </Container>;
 };
 
 export default ControlPanel;