Started migration of frontend to vuetify

src/App.vue

@@ -1,26 +1,36 @@
 <script setup lang="ts">
 import ModelViewer from './ModelViewer.vue'
-</script>
 
+import {ref} from "vue";
+
+let modelsOpened = ref(false)
+let toolsOpened = ref(true)
+</script>
+<
 <template>
-  <ModelViewer></ModelViewer>
+  <v-card>
+    <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-list>
+      </v-navigation-drawer>
+      <v-main style="height: 100vh">
+        <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>
+  </v-card>
 </template>
 
 <style scoped>
-</style>
-
-<style>
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: #000;
-    color: #fff;
-  }
-}
-
-html, body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  overflow: hidden;
-}
 </style>

src/ModelViewerOverlay.vue

@@ -1,7 +1,19 @@
 <script setup lang="ts">
 // TODO: transparent SVG overlay that redirects and grabs some events
+//  https://modelviewer.dev/examples/annotations/index.html
 </script>
 
 <template>
+<svg class="overlay-svg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+<!--  <rect x="0" y="0" width="100%" height="100%" fill="transparent"/>-->
+</svg>
+</template>
 
-</template>
+<style scoped>
+.overlay-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+</style>

src/ModelViewerWrapper.vue

@@ -12,7 +12,6 @@ onMounted(() => {
   // TODO: Custom gizmo component inside Tools window
   // Gizmo installation
   let scene: ModelScene = viewer.value[$scene];
-  console.log('Mounted ModelViewerWrapper', viewer, scene);
   let gizmo = new OrientationGizmo(scene);
   gizmo.install();
 
@@ -22,7 +21,8 @@ onMounted(() => {
   }
 
   updateGizmo();
-  console.log('Mounted ModelViewerWrapper');
+
+  // TODO: Swap camera ortho/perspective tool
 });
 </script>
 
@@ -33,4 +33,11 @@ onMounted(() => {
       :exposure="settings.exposure" :shadow-intensity="settings.shadowIntensity" interaction-prompt="none"
       :autoplay="settings.autoplay" :ar="settings.arModes.length > 0" :ar-modes="settings.arModes"
       :skybox-image="settings.background" :environment-image="settings.background"></model-viewer>
-</template>
+</template>
+
+<style scoped>
+/* This keeps child nodes hidden while the element loads */
+:not(:defined) > * {
+  display: none;
+}
+</style>

src/index.ts

@@ -11,6 +11,25 @@ import {createApp} from 'vue'
 // @ts-ignore
 import App from './App.vue'
 
+
+import 'vuetify/lib/styles/main.sass';
+import { createVuetify } from 'vuetify';
+
+// TODO: Only import the components and directives that are actually used
+// @ts-ignore
+import * as components from 'vuetify/lib/components';
+// @ts-ignore
+import * as directives from 'vuetify/lib/directives';
+
+const vuetify = createVuetify({
+    components,
+    directives,
+    theme: {
+        defaultTheme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
+    }
+});
+
 const app = createApp(App)
+app.use(vuetify)
 app.config.compilerOptions.isCustomElement = tag => tag === 'model-viewer'
 app.mount('body')