misc improvements

.gitignore

@@ -6,6 +6,7 @@
 /.cache/
 /.parcel-cache/
 /.idea/
+/parcel-bundle-reports/
 
 # TODO: Figure out if we want to keep a big default skybox image in the repo
 /assets/st_peters_square_night_8k.jpg

.vuerc.js

@@ -0,0 +1,6 @@
+// noinspection JSUnusedGlobalSymbols,JSUnresolvedReference
+module.exports = {
+    compilerOptions: {
+        isCustomElement: tag => tag === 'model-viewer'
+    }
+}

package.json

@@ -6,7 +6,7 @@
   "author": "Yeicor",
   "scripts": {
     "start": "parcel src/index.html",
-    "build": "parcel build src/index.html"
+    "build": "parcel build src/index.html --reporter @parcel/reporter-bundle-analyzer --detailed-report"
   },
   "dependencies": {
     "@google/model-viewer": "^3.4.0",
@@ -16,12 +16,19 @@
     "vuetify": "^3.5.3"
   },
   "devDependencies": {
+    "@mdi/font": "^7.4.47",
     "@parcel/optimizer-data-url": "2.11.0",
+    "@parcel/reporter-bundle-analyzer": "^2.11.0",
     "@parcel/transformer-inline-string": "2.11.0",
     "@parcel/transformer-sass": "^2.11.0",
     "@parcel/transformer-vue": "2.11.0",
     "@types/three": "^0.160.0",
     "buffer": "^5.5.0||^6.0.0",
     "parcel": "^2.11.0"
-  }
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

src/App.vue

@@ -2,33 +2,34 @@
 import ModelViewer from './ModelViewer.vue'
 
 import {ref} from "vue";
+import Loading from "./Loading.vue";
 
-let modelsOpened = ref(false)
-let toolsOpened = ref(true)
+// Open models by default on wide screens
+let modelsOpened = ref(window.innerWidth > 600);
 </script>
-<
+
 <template>
-  <v-layout>
-    <v-btn @click="modelsOpened = !modelsOpened" max-width="22px" style="position:absolute; z-index: 1">&gt;</v-btn>
-    <v-navigation-drawer v-model="modelsOpened">
-      <v-list density="compact" nav > <!-- TODO: Accordion -->
-        <v-list-item-title>Models <v-btn @click="modelsOpened = !modelsOpened" style="float: right" height="22px"><</v-btn></v-list-item-title>
-        <v-list-item prepend-icon="mdi-view-dashboard" title="Home" value="home"></v-list-item>
-        <v-list-item prepend-icon="mdi-forum" title="About" value="about"></v-list-item>
+  <v-layout full-height>
+    <v-btn icon="$menu" @click="modelsOpened = !modelsOpened" style="position: absolute; z-index: 1"/>
+    <v-navigation-drawer v-model="modelsOpened" permanent>
+      <v-toolbar>
+        <v-toolbar-title>Models</v-toolbar-title>
+        <v-toolbar-items>
+          <v-btn icon="$close" @click="modelsOpened = !modelsOpened"/>
+        </v-toolbar-items>
+      </v-toolbar>
+      <v-list density="compact" nav> <!-- TODO: Accordion -->
+        <v-list-item><Loading/></v-list-item>
       </v-list>
     </v-navigation-drawer>
-    <v-main style="height: 100vh">
+    <v-main >
       <ModelViewer/>
     </v-main>
-    <v-navigation-drawer location="right" v-model="toolsOpened" opa>
-      <v-list density="compact" nav >
-        <v-list-item-title>Tools</v-list-item-title>
-        <v-list-item prepend-icon="mdi-view-dashboard" title="Home" value="home"></v-list-item>
-        <v-list-item prepend-icon="mdi-forum" title="About" value="about"></v-list-item>
-      </v-list>
-    </v-navigation-drawer>
   </v-layout>
 </template>
 
-<style scoped>
+<style>
+html, body {
+  height: 100%;
+}
 </style>

src/Loading.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-container style="height: 100%">
+    <v-row justify="center" style="height: 100%">
+      <v-col align-self="center">
+        <v-progress-circular indeterminate style="display: block; margin: 0 auto;"/>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

src/ModelViewer.vue

@@ -1,11 +1,19 @@
 <script setup lang="ts">
-import ModelViewerWrapper from "./ModelViewerWrapper.vue";
 import ModelViewerOverlay from "./ModelViewerOverlay.vue";
+import Loading from "./Loading.vue";
+import {defineAsyncComponent} from "vue";
+
+// NOTE: The ModelViewer library is big, so we split it and import it asynchronously
+const ModelViewerWrapper = defineAsyncComponent({
+  loader: () => import('./ModelViewerWrapper.vue'),
+  loadingComponent: Loading,
+  delay: 0,
+});
 </script>
 
 <template>
-  <ModelViewerWrapper/>
-  <ModelViewerOverlay/>
+  <model-viewer-wrapper/>
+  <model-viewer-overlay/>
 </template>
 
 <style scoped>

src/ModelViewerWrapper.vue

@@ -9,7 +9,7 @@ import {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
 let _ = ModelViewerElement  // HACK: Keep the import from being removed by the bundler
 const viewer = ref(null);
 onMounted(() => {
-  // TODO: Custom gizmo component inside Tools window
+  // TODO: Custom gizmo component inside tools sidebar
   // Gizmo installation
   let scene: ModelScene = viewer.value[$scene];
   let gizmo = new OrientationGizmo(scene);
@@ -28,7 +28,7 @@ onMounted(() => {
 
 <template>
   <model-viewer
-      ref="viewer" style="width: 100%; height: 100%" :src="settings.preloadModel" alt="The 3D model(s)" camera-controls
+      ref="viewer" style="width: 100%; height: 100%" :src="settings.preloadModels[0]" alt="The 3D model(s)" camera-controls
       camera-orbit="30deg 75deg auto" max-camera-orbit="Infinity 180deg auto" min-camera-orbit="-Infinity 0deg auto"
       :exposure="settings.exposure" :shadow-intensity="settings.shadowIntensity" interaction-prompt="none"
       :autoplay="settings.autoplay" :ar="settings.arModes.length > 0" :ar-modes="settings.arModes"

src/index.ts

@@ -14,6 +14,7 @@ import App from './App.vue'
 
 import 'vuetify/lib/styles/main.sass';
 import { createVuetify } from 'vuetify';
+import '@mdi/font/css/materialdesignicons.css'
 
 // TODO: Only import the components and directives that are actually used
 // @ts-ignore
@@ -31,5 +32,4 @@ const vuetify = createVuetify({
 
 const app = createApp(App)
 app.use(vuetify)
-app.config.compilerOptions.isCustomElement = tag => tag === 'model-viewer'
 app.mount('body')

src/settings.ts

@@ -1,31 +1,48 @@
 // @ts-ignore
-import skyboxUrl from '../assets/st_peters_square_night_8k.jpg';
-// @ts-ignore
-import logo from "url:../assets/fox.glb";
+// import logo from "url:../assets/fox.glb";
 
+// These are the default values for the settings, which are overridden below
 export const settings = {
+    // @ts-ignore
+    preloadModels: [new URL('../assets/fox.glb', import.meta.url).href, "ws://localhost:8080/api/updates"],
     // ModelViewer settings
-    preloadModel: logo,
     autoplay: true,
     arModes: 'webxr scene-viewer quick-look',
     exposure: 1,
     shadowIntensity: 0,
-    background: skyboxUrl,
+    background: '',
+}
+
+const firstTimeNames = []; // Needed for array values, which clear the array when overridden
+function parseSetting(name: string, value: string): any {
+    let arrayElem = name.endsWith(".0")
+    if (arrayElem) name = name.slice(0, -2);
+    let prevValue = settings[name];
+    if (prevValue === undefined) throw new Error(`Unknown setting: ${name}`);
+    if (Array.isArray(prevValue) && !arrayElem) {
+        let toExtend = []
+        if (!firstTimeNames.includes(name)) {
+            firstTimeNames.push(name);
+        } else {
+            toExtend = prevValue;
+        }
+        toExtend.push(parseSetting(name+".0", value));
+        return toExtend;
+    }
+    switch (typeof prevValue) {
+        case 'boolean':
+            return value === 'true';
+        case 'number':
+            return Number(value);
+        case 'string':
+            return value;
+        default:
+            throw new Error(`Unknown setting type: ${typeof prevValue}`);
+    }
 }
 
 // Auto-override any settings from the URL
 const url = new URL(window.location.href);
 url.searchParams.forEach((value, key) => {
-    if (key in settings) {
-        switch (typeof settings[key]) {
-            case 'boolean':
-                settings[key] = value === 'true';
-                break;
-            case 'number':
-                settings[key] = Number(value);
-                break;
-            default:
-                settings[key] = value;
-        }
-    }
+    if (key in settings) settings[key] = parseSetting(key, value);
 })

tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "lib": ["ES2020", "DOM"],
+    "allowSyntheticDefaultImports": true
+  }
+}

yarn.lock

@@ -96,6 +96,11 @@
   resolved "https://registry.yarnpkg.com/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-2.8.5.tgz#8233e8762440b0f4632c47a09b1b6f23de8b934c"
   integrity sha512-4wvrf5BgnR8RpogHhtpCPJMKBmvyZPhhUtEwMJbXh0ni2BucpfF07jlmyM11zRqQ2XIq6PbC2j7W7UCCcm1rRQ==
 
+"@mdi/font@^7.4.47":
+  version "7.4.47"
+  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-7.4.47.tgz#2ae522867da3a5c88b738d54b403eb91471903af"
+  integrity sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==
+
 "@mischnic/json-sourcemap@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@mischnic/json-sourcemap/-/json-sourcemap-0.1.1.tgz#0ef9b015a8f575dd9a8720d9a6b4dbc988425906"
@@ -471,6 +476,15 @@
     "@parcel/events" "2.11.0"
     chrome-trace-event "^1.0.2"
 
+"@parcel/reporter-bundle-analyzer@^2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@parcel/reporter-bundle-analyzer/-/reporter-bundle-analyzer-2.11.0.tgz#3a754aa314f5298c2990e7be6d9e02ea49d377e2"
+  integrity sha512-Cqob9LbXTDmkw1hZZIMiHSJYTBBfz+DsD2m/arrBGgW20L9xJ9yZGP/+myPeoznuOBwkpST6KuU4o+zdV7JCGQ==
+  dependencies:
+    "@parcel/plugin" "2.11.0"
+    "@parcel/utils" "2.11.0"
+    nullthrows "^1.1.1"
+
 "@parcel/reporter-cli@2.11.0":
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/@parcel/reporter-cli/-/reporter-cli-2.11.0.tgz#727ee271ee5af002d137fa89ca25ccdca0f797fe"