optimized build size again (icons & camera)

src/App.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import {defineAsyncComponent, ref, Ref} from "vue";
-import Sidebar from "./models/Sidebar.vue";
-import Loading from "./viewer/Loading.vue";
+import Sidebar from "./misc/Sidebar.vue";
+import Loading from "./misc/Loading.vue";
 import ModelViewerOverlay from "./viewer/ModelViewerOverlay.vue";
 import Tools from "./tools/Tools.vue";
 import Models from "./models/Models.vue";
 import {VLayout, VMain, VToolbarTitle} from "vuetify/lib/components";
 import type {ModelViewerInfo} from "./viewer/ModelViewerWrapper.vue";
-import {settings} from "./tools/settings";
+import {settings} from "./misc/settings";
 
 // NOTE: The ModelViewer library is big (THREE.js), so we split it and import it asynchronously
 const ModelViewerWrapper = defineAsyncComponent({
@@ -23,11 +23,13 @@ let modelSrc: Ref<string | Uint8Array> = ref(settings.preloadModels[0]);
 
 <template>
   <v-layout full-height>
+
     <!-- The main content of the app is the model-viewer with the SVG "2D" overlay -->
     <v-main id="main">
       <model-viewer-wrapper :src="modelSrc" @load-viewer="(args) => modelViewerInfo = args"/>
       <model-viewer-overlay v-if="modelViewerInfo"/>
     </v-main>
+
     <!-- The left collapsible sidebar has the list of models -->
     <sidebar :opened-init="openSidebarsByDefault" side="left">
       <template #toolbar>
@@ -35,6 +37,7 @@ let modelSrc: Ref<string | Uint8Array> = ref(settings.preloadModels[0]);
       </template>
       <models :modelViewerInfo="modelViewerInfo"/>
     </sidebar>
+
     <!-- The right collapsible sidebar has the list of tools -->
     <sidebar :opened-init="openSidebarsByDefault" side="right" :width="120">
       <template #toolbar>
@@ -42,6 +45,7 @@ let modelSrc: Ref<string | Uint8Array> = ref(settings.preloadModels[0]);
       </template>
       <tools :modelViewerInfo="modelViewerInfo"/>
     </sidebar>
+
   </v-layout>
 </template>
 

src/index.ts

@@ -21,6 +21,5 @@ const app = createApp(App)
 app.use(vuetify)
 app.mount('body')
 
-// Start non-blocking loading of Vuetify and icon styles
-import('vuetify/lib/styles/main.sass');
-import('@mdi/font/css/materialdesignicons.css');
+// Start non-blocking loading of Vuetify styles
+import('vuetify/lib/styles/main.sass');

src/misc/Sidebar.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import {ref} from "vue";
 import {VBtn, VNavigationDrawer, VToolbar, VToolbarItems} from "vuetify/lib/components";
+import {mdiClose, mdiChevronRight, mdiChevronLeft} from '@mdi/js'
+import SvgIcon from '@jamescoyle/vue-icon';
 
 const props = defineProps({
   openedInit: Boolean,
@@ -9,22 +11,28 @@ const props = defineProps({
 });
 
 let opened = ref(props.openedInit);
-const openIcon = props.side === 'left' ? '$next' : '$prev';
+const openIcon = props.side === 'left' ? mdiChevronRight : mdiChevronLeft;
 
 </script>
 
 <template>
-  <v-btn :icon="openIcon" @click="opened = !opened" class="open-button" :class="side"/>
+  <v-btn icon="" @click="opened = !opened" class="open-button" :class="side">
+    <svg-icon type="mdi" :path="openIcon"/>
+  </v-btn>
   <v-navigation-drawer v-model="opened" permanent :location="side" :width="props.width">
     <v-toolbar density="compact">
       <v-toolbar-items v-if="side == 'right'">
         <slot name="toolbar-items"></slot>
-        <v-btn icon="$close" @click="opened = !opened"/>
+        <v-btn icon="" @click="opened = !opened">
+          <svg-icon type="mdi" :path="mdiClose"/>
+        </v-btn>
       </v-toolbar-items>
       <slot name="toolbar"></slot>
       <v-toolbar-items v-if="side == 'left'">
         <slot name="toolbar-items"></slot>
-        <v-btn icon="$close" @click="opened = !opened"/>
+        <v-btn icon="" @click="opened = !opened">
+          <svg-icon type="mdi" :path="mdiClose"/>
+        </v-btn>
       </v-toolbar-items>
     </v-toolbar>
     <slot/>

src/tools/Tools.vue

@@ -3,16 +3,19 @@ import {VBtn, VIcon} from "vuetify/lib/components";
 import {ref} from "vue";
 import OrientationGizmo from "./OrientationGizmo.vue";
 import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
-import {OrthographicCamera} from "three";
+import {OrthographicCamera} from "three/src/cameras/OrthographicCamera";
+import {mdiCrosshairsGps, mdiProjector} from '@mdi/js'
+import SvgIcon from '@jamescoyle/vue-icon';
 
-const props = defineProps({
-  modelViewerInfo: Object
-});
+
+const props = defineProps<{
+  modelViewerInfo: { scene: ModelScene } | null
+}>();
 
 
 function syncOrthoCamera(force: boolean) {
   if (!props.modelViewerInfo) return;
-  let scene: ModelScene = props.modelViewerInfo.scene
+  let scene = props.modelViewerInfo.scene
   let perspectiveCam = (scene as any).__perspectiveCamera;
   if (force || perspectiveCam && scene.camera != perspectiveCam) {
     // Get zoom level from perspective camera
@@ -29,7 +32,7 @@ function syncOrthoCamera(force: boolean) {
 let toggleProjectionText = ref('PERSP'); // Default to perspective camera
 function toggleProjection() {
   if (!props.modelViewerInfo) return;
-  let scene: ModelScene = props.modelViewerInfo.scene
+  let scene = props.modelViewerInfo.scene
   let prevCam = scene.camera;
   let wasPerspectiveCamera = prevCam.isPerspectiveCamera;
   if (wasPerspectiveCamera) {
@@ -47,11 +50,15 @@ function toggleProjection() {
 
 <template>
   <orientation-gizmo v-if="props.modelViewerInfo" :scene="props.modelViewerInfo.scene"/>
-  <v-btn icon="mdi-projector" @click="toggleProjection"><span class="icon-detail">{{ toggleProjectionText }}</span>
-    <v-icon icon="mdi-projector"></v-icon>
+  <v-btn icon="" @click="toggleProjection"><span class="icon-detail">{{ toggleProjectionText }}</span>
+    <svg-icon type="mdi" :path="mdiProjector"></svg-icon>
+  </v-btn>
+  <v-btn icon="" @click=""> <!-- TODO: Center camera -->
+    <svg-icon type="mdi" :path="mdiCrosshairsGps"/>
   </v-btn>
 </template>
 
+<!--suppress CssUnusedSymbol -->
 <style>
 .icon-detail {
   position: absolute;
@@ -62,7 +69,7 @@ function toggleProjection() {
   margin: auto;
 }
 
-.icon-detail + .v-icon {
+.icon-detail + svg {
   position: relative;
   top: 5px;
 }

src/viewer/ModelViewerWrapper.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {settings} from "../tools/settings";
+import {settings} from "../misc/settings";
 import {ModelViewerElement} from '@google/model-viewer';
 import {onMounted, ref} from "vue";
 import {$scene} from "@google/model-viewer/lib/model-viewer-base";
@@ -28,7 +28,6 @@ onMounted(() => {
 </script>
 
 <template>
-  <!--suppress VueMissingComponentImportInspection -->
   <model-viewer ref="viewer"
                 style="width: 100%; height: 100%" :src="props.src" alt="The 3D model(s)" camera-controls
                 camera-orbit="30deg 75deg auto" max-camera-orbit="Infinity 180deg auto"