Automatically update version to 0.8.8

Lots of frontend improvements like keeping camera position on changes, avoid flickering on live updates, smooth gizmo animations, proper ortho camera movement, and enabling move by tap when not selecting.
Automatically update version to 0.8.7
2025-12-19 22:24:17 +01:00 · 2024-03-31 18:24:32 +00:00 · 2024-03-31 20:20:53 +02:00 · 2024-03-30 17:02:20 +00:00 · 2024-03-30 18:00:50 +01:00 · 2024-03-30 18:00:37 +01:00
32 changed files with 743 additions and 497 deletions
--- a/.github/workflows/deploy2.yml
+++ b/.github/workflows/deploy2.yml
@@ -40,7 +40,7 @@ jobs:
            mv "$dir/"* public/
            rmdir "$dir"
          done
-      - uses: "actions/configure-pages@v4"
+      - uses: "actions/configure-pages@v5"
      - uses: "actions/upload-pages-artifact@v3"
        with:
          path: 'public'
--- a/assets/licenses.txt
+++ b/assets/licenses.txt
@@ -2225,13 +2225,13 @@ THE SOFTWARE.

 The following npm package may be included in this product:

- - three@0.162.0
+ - three@0.160.1

 This package contains the following license and notice below:

 The MIT License

-Copyright © 2010-2024 three.js authors
+Copyright © 2010-2023 three.js authors

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -2439,7 +2439,7 @@ THE SOFTWARE.

 The following npm package may be included in this product:

- - vuetify@3.5.11
+ - vuetify@3.5.13

 This package contains the following license and notice below:

--- a/example/object.py
+++ b/example/object.py
@@ -18,6 +18,7 @@ with BuildPart() as example:
 # Show it in the frontend with hot-reloading
 show(example)

+
 # %%

 # If running on CI, export the objects to .glb files for a static deployment
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -1,13 +1,13 @@
 <!--suppress SillyAssignmentJS -->
-<script setup lang="ts">
-import {defineAsyncComponent, provide, type Ref, ref, shallowRef, triggerRef} from "vue";
+<script lang="ts" setup>
+import {defineAsyncComponent, provide, type Ref, ref, shallowRef, triggerRef, watch} from "vue";
 import Sidebar from "./misc/Sidebar.vue";
 import Loading from "./misc/Loading.vue";
 import Tools from "./tools/Tools.vue";
 import Models from "./models/Models.vue";
 import {VBtn, VLayout, VMain, VToolbarTitle} from "vuetify/lib/components/index.mjs";
 import {settings} from "./misc/settings";
-import {NetworkManager, NetworkUpdateEvent} from "./misc/network";
+import {NetworkManager, NetworkUpdateEvent, NetworkUpdateEventModel} from "./misc/network";
 import {SceneMgr} from "./misc/scene";
 import {Document} from "@gltf-transform/core";
 import type ModelViewerWrapperT from "./viewer/ModelViewerWrapper.vue";
@@ -28,11 +28,16 @@ const viewer: Ref<InstanceType<typeof ModelViewerWrapperT> | null> = ref(null);
 const sceneDocument = shallowRef(new Document());
 provide('sceneDocument', {sceneDocument});
 const models: Ref<InstanceType<typeof Models> | null> = ref(null)
+const tools: Ref<InstanceType<typeof Tools> | null> = ref(null)
 const disableTap = ref(false);
 const setDisableTap = (val: boolean) => disableTap.value = val;
 provide('disableTap', {disableTap, setDisableTap});

 async function onModelUpdateRequest(event: NetworkUpdateEvent) {
+  // Trigger progress bar as soon as possible (also triggered earlier for each raw notification)
+  if (viewer.value && event.models.length > 0) {
+    viewer.value.onProgress(0.10);
+  }
  // Load/unload a new batch of models to optimize rendering time
  console.log("Received model update request", event.models);
  let shutdownRequestIndex = event.models.findIndex((model) => model.isRemove == null);
@@ -45,6 +50,7 @@ async function onModelUpdateRequest(event: NetworkUpdateEvent) {
  for (let modelIndex in event.models) {
    let isLast = parseInt(modelIndex) === event.models.length - 1;
    let model = event.models[modelIndex];
+    tools.value?.removeObjectSelections(model.name);
    try {
      if (!model.isRemove) {
        doc = await SceneMgr.loadModel(sceneUrl, doc, model.name, model.url, isLast && settings.loadHelpers, isLast);
@@ -64,17 +70,25 @@ async function onModelUpdateRequest(event: NetworkUpdateEvent) {
 }

 async function onModelRemoveRequest(name: string) {
-  sceneDocument.value = await SceneMgr.removeModel(sceneUrl, sceneDocument.value, name);
-  triggerRef(sceneDocument); // Why not triggered automatically?
+  await onModelUpdateRequest(new NetworkUpdateEvent([new NetworkUpdateEventModel(name, "", null, true)], () => {
+  }));
 }

 // Set up the load model event listener
 let networkMgr = new NetworkManager();
+networkMgr.addEventListener('update-early',
+    (e) => viewer.value?.onProgress((e as CustomEvent<Array<any>>).detail.length * 0.01));
 networkMgr.addEventListener('update', (e) => onModelUpdateRequest(e as NetworkUpdateEvent));
 // Start loading all configured models ASAP
 for (let model of settings.preload) {
  networkMgr.load(model);
 }
+watch(viewer, (newViewer) => {
+  if (newViewer) {
+    newViewer.setPosterText('<tspan x="50%" dy="1.2em">Trying to load' +
+        ' models from:</tspan>' + settings.preload.map((url) => '<tspan x="50%" dy="1.2em">- ' + url + '</tspan>').join(""));
+  }
+});

 async function loadModelManual() {
  const modelUrl = prompt("For an improved experience in viewing CAD/GLTF models with automatic updates, it's recommended to use the official yacv_server Python package. This ensures seamless serving of models and automatic updates.\n\nOtherwise, enter the URL of the model to load:");
@@ -91,24 +105,24 @@ async function loadModelManual() {
    </v-main>

    <!-- The left collapsible sidebar has the list of models -->
-    <sidebar :opened-init="openSidebarsByDefault" side="left" :width="300">
+    <sidebar :opened-init="openSidebarsByDefault" :width="300" side="left">
      <template #toolbar>
        <v-toolbar-title>Models</v-toolbar-title>
      </template>
      <template #toolbar-items>
        <v-btn icon="" @click="loadModelManual">
-          <svg-icon type="mdi" :path="mdiPlus"/>
+          <svg-icon :path="mdiPlus" type="mdi"/>
        </v-btn>
      </template>
      <models ref="models" :viewer="viewer" @remove="onModelRemoveRequest"/>
    </sidebar>

    <!-- The right collapsible sidebar has the list of tools -->
-    <sidebar :opened-init="openSidebarsByDefault" side="right" :width="48 * 3 /* buttons */ + 1 /* border? */">
+    <sidebar :opened-init="openSidebarsByDefault" :width="48 * 3 /* buttons */ + 1 /* border? */" side="right">
      <template #toolbar>
        <v-toolbar-title>Tools</v-toolbar-title>
      </template>
-      <tools :viewer="viewer" @findModel="(name) => models?.findModel(name)"/>
+      <tools ref="tools" :viewer="viewer" @findModel="(name) => models?.findModel(name)"/>
    </sidebar>

  </v-layout>
--- a/frontend/misc/Loading.vue
+++ b/frontend/misc/Loading.vue
@@ -1,5 +1,5 @@
-<script setup lang="ts">
-import {VContainer, VRow, VCol, VProgressCircular} from "vuetify/lib/components/index.mjs";
+<script lang="ts" setup>
+import {VCol, VContainer, VProgressCircular, VRow} from "vuetify/lib/components/index.mjs";
 </script>

 <template>
--- a/frontend/misc/Sidebar.vue
+++ b/frontend/misc/Sidebar.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import {ref} from "vue";
 import {VBtn, VNavigationDrawer, VToolbar, VToolbarItems} from "vuetify/lib/components/index.mjs";
 import {mdiChevronLeft, mdiChevronRight, mdiClose} from '@mdi/js'
@@ -16,22 +16,22 @@ const openIcon = props.side === 'left' ? mdiChevronRight : mdiChevronLeft;
 </script>

 <template>
-  <v-btn icon @click="opened = !opened" class="open-button" :class="side">
-    <svg-icon type="mdi" :path="openIcon"/>
+  <v-btn :class="side" class="open-button" icon @click="opened = !opened">
+    <svg-icon :path="openIcon" type="mdi"/>
  </v-btn>
-  <v-navigation-drawer v-model="opened" permanent :location="side" :width="props.width">
+  <v-navigation-drawer v-model="opened" :location="side" :width="props.width" permanent>
    <v-toolbar density="compact">
      <v-toolbar-items v-if="side == 'right'">
        <slot name="toolbar-items"></slot>
        <v-btn icon @click="opened = !opened">
-          <svg-icon type="mdi" :path="mdiClose"/>
+          <svg-icon :path="mdiClose" type="mdi"/>
        </v-btn>
      </v-toolbar-items>
      <slot name="toolbar"></slot>
      <v-toolbar-items v-if="side == 'left'">
        <slot name="toolbar-items"></slot>
        <v-btn icon @click="opened = !opened">
-          <svg-icon type="mdi" :path="mdiClose"/>
+          <svg-icon :path="mdiClose" type="mdi"/>
        </v-btn>
      </v-toolbar-items>
    </v-toolbar>
--- a/frontend/misc/distances.ts
+++ b/frontend/misc/distances.ts
@@ -8,7 +8,6 @@ function getCenterAndVertexList(selInfo: SelectionInfo, scene: ModelScene): {
    center: Vector3,
    vertices: Array<Vector3>
 } {
-    selInfo.object.updateMatrixWorld();
    let pos: BufferAttribute | InterleavedBufferAttribute = selInfo.object.geometry.getAttribute('position');
    let ind: BufferAttribute | null = selInfo.object.geometry.index;
    if (ind === null) {
--- a/frontend/misc/gltf.ts
+++ b/frontend/misc/gltf.ts
@@ -21,7 +21,32 @@ export async function mergePartial(url: string, name: string, document: Document
    networkFinished();

    // Load the new document
-    let newDoc = await io.readBinary(new Uint8Array(buffer));
+    let newDoc = null;
+    let alreadyTried: { [name: string]: boolean } = {}
+    while (newDoc == null) { // Retry adding extensions as required until the document is loaded
+        try { // Try to load fast if no extensions are used
+            newDoc = await io.readBinary(new Uint8Array(buffer));
+        } catch (e) { // Fallback to wait for download and register big extensions
+            if (e instanceof Error && e.message.toLowerCase().includes("khr_draco_mesh_compression")) {
+                if (alreadyTried["draco"]) throw e; else alreadyTried["draco"] = true;
+                // WARNING: Draco decompression on web is really slow for non-trivial models! (it should work?)
+                let {KHRDracoMeshCompression} = await import("@gltf-transform/extensions")
+                let dracoDecoderWeb = await import("three/examples/jsm/libs/draco/draco_decoder.js");
+                let dracoEncoderWeb = await import("three/examples/jsm/libs/draco/draco_encoder.js");
+                io.registerExtensions([KHRDracoMeshCompression])
+                    .registerDependencies({
+                        'draco3d.decoder': await dracoDecoderWeb.default({}),
+                        'draco3d.encoder': await dracoEncoderWeb.default({})
+                    });
+            } else if (e instanceof Error && e.message.toLowerCase().includes("ext_texture_webp")) {
+                if (alreadyTried["webp"]) throw e; else alreadyTried["webp"] = true;
+                let {EXTTextureWebP} = await import("@gltf-transform/extensions")
+                io.registerExtensions([EXTTextureWebP]);
+            } else { // TODO: Add more extensions as required
+                throw e;
+            }
+        }
+    }

    // Remove any previous model with the same name
    await document.transform(dropByName(name));
--- a/frontend/misc/helpers.ts
+++ b/frontend/misc/helpers.ts
@@ -66,8 +66,14 @@ export function newAxes(doc: Document, size: Vector3, transform: Matrix4) {
        ...(AxesColors.y[0]), 255, ...(AxesColors.y[1]), 255,
        ...(AxesColors.z[0]), 255, ...(AxesColors.z[1]), 255
    ].map(x => x / 255.0);
-    buildSimpleGltf(doc, rawPositions, rawIndices, rawColors, new Matrix4(), '__helper_axes'); // Axes at (0,0,0)!
-    buildSimpleGltf(doc, [0, 0, 0], [0], [1, 1, 1, 1], transform, '__helper_axes', WebGL2RenderingContext.POINTS);
+    // Axes at (0, 0, 0)
+    buildSimpleGltf(doc, rawPositions, rawIndices, rawColors, new Matrix4(), '__helper_axes');
+    buildSimpleGltf(doc, [0, 0, 0], [0], [1, 1, 1, 1], new Matrix4(), '__helper_axes', WebGL2RenderingContext.POINTS);
+    // Axes at center
+    if (new Matrix4() != transform) {
+        buildSimpleGltf(doc, rawPositions, rawIndices, rawColors, transform, '__helper_axes_center');
+        buildSimpleGltf(doc, [0, 0, 0], [0], [1, 1, 1, 1], transform, '__helper_axes_center', WebGL2RenderingContext.POINTS);
+    }
 }

 /**
--- a/frontend/misc/lines.ts
+++ b/frontend/misc/lines.ts
@@ -9,13 +9,13 @@ const LineSegments2Import = import('three/examples/jsm/lines/LineSegments2.js');
 const LineMaterialImport = import('three/examples/jsm/lines/LineMaterial.js');
 const LineSegmentsGeometryImport = import('three/examples/jsm/lines/LineSegmentsGeometry.js');

-export async function toLineSegments(bufferGeometry: BufferGeometry) {
+export async function toLineSegments(bufferGeometry: BufferGeometry, lineWidth: number = 0.1) {
    const LineSegments2 = (await LineSegments2Import).LineSegments2;
    const LineMaterial = (await LineMaterialImport).LineMaterial;
    return new LineSegments2(await toLineSegmentsGeometry(bufferGeometry), new LineMaterial({
        color: 0xffffffff,
        vertexColors: true,
-        linewidth: 0.1, // mm
+        linewidth: lineWidth, // mm
        worldUnits: true,
        resolution: new Vector2(1, 1), // Update resolution on resize!!!
    }));
--- a/frontend/misc/network.ts
+++ b/frontend/misc/network.ts
@@ -2,7 +2,7 @@ import {settings} from "./settings";

 const batchTimeout = 250; // ms

-class NetworkUpdateEventModel {
+export class NetworkUpdateEventModel {
    name: string;
    url: string;
    // TODO: Detect and manage instances of the same object (same hash, different name)
@@ -80,6 +80,9 @@ export class NetworkManager extends EventTarget {
                            controller.abort(); // Notify the server that we are done
                        });
                    }
+                } else {
+                    // Server is down, wait a little longer before retrying
+                    await new Promise(resolve => setTimeout(resolve, 10 * settings.monitorEveryMs));
                }
                controller.abort();
            } catch (e) { // Ignore errors (retry very soon)
@@ -90,28 +93,47 @@ export class NetworkManager extends EventTarget {

    private foundModel(name: string, hash: string | null, url: string, isRemove: boolean | null, disconnect: () => void = () => {
    }) {
-        let prevHash = this.knownObjectHashes[name];
-        // console.debug("Found model", name, "with hash", hash, "and previous hash", prevHash);
-        if (!hash || hash !== prevHash || isRemove) {
-            // Update known hashes
-            if (isRemove == false) {
-                this.knownObjectHashes[name] = hash;
-            } else if (isRemove == true) {
-                if (!(name in this.knownObjectHashes)) return; // Nothing to remove...
-                delete this.knownObjectHashes[name];
-                // Also update buffered updates if the model is removed
-                this.bufferedUpdates = this.bufferedUpdates.filter(m => m.name !== name);
-            }
-            let newModel = new NetworkUpdateEventModel(name, url, hash, isRemove);
-            this.bufferedUpdates.push(newModel);
+        // console.debug("Found model", name, "with hash", hash, "at", url, "isRemove", isRemove);

-            // Optimization: try to batch updates automatically for faster rendering
-            if (this.batchTimeout !== null) clearTimeout(this.batchTimeout);
-            this.batchTimeout = setTimeout(() => {
-                this.dispatchEvent(new NetworkUpdateEvent(this.bufferedUpdates, disconnect));
-                this.bufferedUpdates = [];
-            }, batchTimeout);
-        }
+        // We only care about the latest update per model name
+        this.bufferedUpdates = this.bufferedUpdates.filter(m => m.name !== name);
+
+        // Add the new model to the list of updates and dispatch the early update
+        let upd = new NetworkUpdateEventModel(name, url, hash, isRemove);
+        this.bufferedUpdates.push(upd);
+        this.dispatchEvent(new CustomEvent("update-early", {detail: this.bufferedUpdates}));
+
+        // Optimization: try to batch updates automatically for faster rendering
+        if (this.batchTimeout !== null) clearTimeout(this.batchTimeout);
+        this.batchTimeout = setTimeout(() => {
+            // Update known hashes for minimal updates
+            for (let model of this.bufferedUpdates) {
+                if (model.isRemove == false && model.hash && model.hash === this.knownObjectHashes[model.name]) {
+                    // Delete this useless update
+                    let foundFirst = false;
+                    this.bufferedUpdates = this.bufferedUpdates.filter(m => {
+                        if (m === model) {
+                            if (!foundFirst) { // Remove only first full match
+                                foundFirst = true;
+                                return false;
+                            }
+                        }
+                        return true;
+                    })
+                } else {
+                    // Keep this update and update the last known hash
+                    if (model.isRemove == true) {
+                        if (model.name in this.knownObjectHashes) delete this.knownObjectHashes[model.name];
+                    } else if (model.isRemove == false) {
+                        this.knownObjectHashes[model.name] = model.hash;
+                    }
+                }
+            }
+
+            // Dispatch the event to actually update the models
+            this.dispatchEvent(new NetworkUpdateEvent(this.bufferedUpdates, disconnect));
+            this.bufferedUpdates = [];
+        }, batchTimeout);
    }
 }

--- a/frontend/misc/scene.ts
+++ b/frontend/misc/scene.ts
@@ -13,41 +13,30 @@ export class SceneMgr {
        let loadStart = performance.now();
        let loadNetworkEnd: number;

-        // Start merging into the current document, replacing or adding as needed
-        document = await mergePartial(url, name, document, () => loadNetworkEnd = performance.now());
+        try {
+            // Start merging into the current document, replacing or adding as needed
+            document = await mergePartial(url, name, document, () => loadNetworkEnd = performance.now());

-        console.log("Model", name, "loaded in", performance.now() - loadNetworkEnd!, "ms after",
-            loadNetworkEnd! - loadStart, "ms of transferring data (maybe building the object on the server)");
+            console.log("Model", name, "loaded in", performance.now() - loadNetworkEnd!, "ms after",
+                loadNetworkEnd! - loadStart, "ms of transferring data (maybe building the object on the server)");
+        } finally {
+            if (updateHelpers) {
+                // Reload the helpers to fit the new model
+                await this.reloadHelpers(sceneUrl, document, reloadScene);
+                reloadScene = false;
+            }

-        if (updateHelpers) {
-            // Reload the helpers to fit the new model
-            await this.reloadHelpers(sceneUrl, document, reloadScene);
-            reloadScene = false;
-        }
-
-        if (reloadScene) {
-            // Display the final fully loaded model
-            let displayStart = performance.now();
-            document = await this.showCurrentDoc(sceneUrl, document);
-            console.log("Scene displayed in", performance.now() - displayStart, "ms");
+            if (reloadScene) {
+                // Display the final fully loaded model
+                let displayStart = performance.now();
+                document = await this.showCurrentDoc(sceneUrl, document);
+                console.log("Scene displayed in", performance.now() - displayStart, "ms");
+            }
        }

        return document;
    }

-    private static async reloadHelpers(sceneUrl: Ref<string>, document: Document, reloadScene: boolean): Promise<Document> {
-        let bb = SceneMgr.getBoundingBox(document);
-        if (!bb) return document;
-
-        // Create the helper axes and grid box
-        let helpersDoc = new Document();
-        let transform = (new Matrix4()).makeTranslation(bb.getCenter(new Vector3()));
-        newAxes(helpersDoc, bb.getSize(new Vector3()).multiplyScalar(0.5), transform);
-        newGridBox(helpersDoc, bb.getSize(new Vector3()), transform);
-        let helpersUrl = URL.createObjectURL(new Blob([await toBuffer(helpersDoc)]));
-        return await SceneMgr.loadModel(sceneUrl, document, extrasNameValueHelpers, helpersUrl, false, reloadScene);
-    }
-
    static getBoundingBox(document: Document): Box3 | null {
        if (document.getRoot().listNodes().length === 0) return null;
        // Get bounding box of the model and use it to set the size of the helpers
@@ -89,6 +78,19 @@ export class SceneMgr {
        return document;
    }

+    private static async reloadHelpers(sceneUrl: Ref<string>, document: Document, reloadScene: boolean): Promise<Document> {
+        let bb = SceneMgr.getBoundingBox(document);
+        if (!bb) return document;
+
+        // Create the helper axes and grid box
+        let helpersDoc = new Document();
+        let transform = (new Matrix4()).makeTranslation(bb.getCenter(new Vector3()));
+        newAxes(helpersDoc, bb.getSize(new Vector3()).multiplyScalar(0.5), transform);
+        newGridBox(helpersDoc, bb.getSize(new Vector3()), transform);
+        let helpersUrl = URL.createObjectURL(new Blob([await toBuffer(helpersDoc)]));
+        return await SceneMgr.loadModel(sceneUrl, document, extrasNameValueHelpers, helpersUrl, false, reloadScene);
+    }
+
    /** Serializes the current document into a GLB and updates the viewerSrc */
    private static async showCurrentDoc(sceneUrl: Ref<string>, document: Document): Promise<Document> {
        // Make sure the document is fully loaded and ready to be shown
@@ -97,7 +99,7 @@ export class SceneMgr {
        // Serialize the document into a GLB and update the viewerSrc
        let buffer = await toBuffer(document);
        let blob = new Blob([buffer], {type: 'model/gltf-binary'});
-        console.debug("Showing current doc", document, "as", Array.from(buffer));
+        console.debug("Showing current doc", document, "with", buffer.length, "total bytes");
        sceneUrl.value = URL.createObjectURL(blob);

        return document;
--- a/frontend/misc/settings.ts
+++ b/frontend/misc/settings.ts
@@ -13,12 +13,16 @@ export const settings = {
        "dev+http://127.0.0.1:32323/"
    ],
    loadHelpers: true,
+    edgeWidth: 0, /* The default line size for edges, set to 0 to use basic gl.LINEs */
    displayLoadingEveryMs: 1000, /* How often to display partially loaded models */
    monitorEveryMs: 100,
    monitorOpenTimeoutMs: 1000,
    // ModelViewer settings
-    autoplay: true,
+    autoplay: true, // Global animation toggle
    arModes: 'webxr scene-viewer quick-look',
+    zoomSensitivity: 0.25,
+    orbitSensitivity: 1,
+    panSensitivity: 1,
    exposure: 1,
    shadowIntensity: 0,
    background: '',
--- a/frontend/models/Model.vue
+++ b/frontend/models/Model.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import {
  VBtn,
  VBtnToggle,
@@ -12,8 +12,8 @@ import {
  VTooltip,
 } from "vuetify/lib/components/index.mjs";
 import {extrasNameKey, extrasNameValueHelpers} from "../misc/gltf";
-import {Document, Mesh} from "@gltf-transform/core";
-import {inject, ref, type ShallowRef, watch} from "vue";
+import {Mesh} from "@gltf-transform/core";
+import {ref, watch} from "vue";
 import type ModelViewerWrapper from "../viewer/ModelViewerWrapper.vue";
 import {
  mdiCircleOpacity,
@@ -22,6 +22,7 @@ import {
  mdiRectangle,
  mdiRectangleOutline,
  mdiSwapHorizontal,
+  mdiVectorLine,
  mdiVectorRectangle
 } from '@mdi/js'
 import SvgIcon from '@jamescoyle/vue-icon';
@@ -30,9 +31,9 @@ import {Box3} from "three/src/math/Box3.js";
 import {Color} from "three/src/math/Color.js";
 import {Plane} from "three/src/math/Plane.js";
 import {Vector3} from "three/src/math/Vector3.js";
-import {Vector2} from "three/src/math/Vector2.js";
 import type {MObject3D} from "../tools/Selection.vue";
 import {toLineSegments} from "../misc/lines.js";
+import {settings} from "../misc/settings.js"

 const props = defineProps<{
  meshes: Array<Mesh>,
@@ -42,10 +43,11 @@ const emit = defineEmits<{ remove: [] }>()

 let modelName = props.meshes[0].getExtras()[extrasNameKey] // + " blah blah blah blah blag blah blah blah"

-// Reactive properties
-const enabledFeatures = defineModel<Array<number>>("enabledFeatures", {default: [0, 1, 2]});
-const opacity = defineModel<number>("opacity", {default: 1});
-const wireframe = ref(false);
+// Count the number of faces, edges and vertices
+let faceCount = ref(-1);
+let edgeCount = ref(-1);
+let vertexCount = ref(-1);
+
 // Clipping planes are handled in y-up space (swapped on interface, Z inverted later)
 const clipPlaneX = ref(1);
 const clipPlaneSwappedX = ref(false);
@@ -53,25 +55,12 @@ const clipPlaneY = ref(1);
 const clipPlaneSwappedY = ref(false);
 const clipPlaneZ = ref(1);
 const clipPlaneSwappedZ = ref(false);
+const edgeWidth = ref(settings.edgeWidth);

-// Count the number of faces, edges and vertices
-let faceCount = props.meshes
-    .flatMap((m) => m.listPrimitives().filter(p => p.getMode() === WebGL2RenderingContext.TRIANGLES))
-    .map(p => (p.getExtras()?.face_triangles_end as any)?.length ?? 1)
-    .reduce((a, b) => a + b, 0)
-let edgeCount = props.meshes
-    .flatMap((m) => m.listPrimitives().filter(p => p.getMode() in [WebGL2RenderingContext.LINE_STRIP, WebGL2RenderingContext.LINES]))
-    .map(p => (p.getExtras()?.edge_points_end as any)?.length ?? 0)
-    .reduce((a, b) => a + b, 0)
-let vertexCount = props.meshes
-    .flatMap((m) => m.listPrimitives().filter(p => p.getMode() === WebGL2RenderingContext.POINTS))
-    .map(p => (p.getAttribute("POSITION")?.getCount() ?? 0))
-    .reduce((a, b) => a + b, 0)
-
-// Set initial defaults for the enabled features
-if (faceCount === 0) enabledFeatures.value = enabledFeatures.value.filter((f) => f !== 0)
-if (edgeCount === 0) enabledFeatures.value = enabledFeatures.value.filter((f) => f !== 1)
-if (vertexCount === 0) enabledFeatures.value = enabledFeatures.value.filter((f) => f !== 2)
+// Misc properties
+const enabledFeatures = defineModel<Array<number>>("enabledFeatures", {default: [0, 1, 2]});
+const opacity = defineModel<number>("opacity", {default: 1});
+const wireframe = ref(false);

 // Listeners for changes in the properties (or viewer reloads)
 function onEnabledFeaturesChange(newEnabledFeatures: Array<number>) {
@@ -79,9 +68,6 @@ function onEnabledFeaturesChange(newEnabledFeatures: Array<number>) {
  let scene = props.viewer?.scene;
  let sceneModel = (scene as any)?._model;
  if (!scene || !sceneModel) return;
-  // Iterate all primitives of the mesh and set their visibility based on the enabled features
-  // Use the scene graph instead of the document to avoid reloading the same model, at the cost
-  // of not actually removing the primitives from the scene graph
  sceneModel.traverse((child: MObject3D) => {
    if (child.userData[extrasNameKey] === modelName) {
      let childIsFace = child.type == 'Mesh' || child.type == 'SkinnedMesh'
@@ -99,16 +85,12 @@ function onEnabledFeaturesChange(newEnabledFeatures: Array<number>) {
  scene.queueRender()
 }

-watch(enabledFeatures, onEnabledFeaturesChange);
+watch(enabledFeatures, onEnabledFeaturesChange, {deep: true});

 function onOpacityChange(newOpacity: number) {
  let scene = props.viewer?.scene;
  let sceneModel = (scene as any)?._model;
  if (!scene || !sceneModel) return;
-  // Iterate all primitives of the mesh and set their opacity based on the enabled features
-  // Use the scene graph instead of the document to avoid reloading the same model, at the cost
-  // of not actually removing the primitives from the scene graph
-  // console.log('Opacity may have changed', newOpacity)
  sceneModel.traverse((child: MObject3D) => {
    if (child.userData[extrasNameKey] === modelName) {
      if (child.material && child.material.opacity !== newOpacity) {
@@ -127,10 +109,6 @@ function onWireframeChange(newWireframe: boolean) {
  let scene = props.viewer?.scene;
  let sceneModel = (scene as any)?._model;
  if (!scene || !sceneModel) return;
-  // Iterate all primitives of the mesh and set their wireframe based on the enabled features
-  // Use the scene graph instead of the document to avoid reloading the same model, at the cost
-  // of not actually removing the primitives from the scene graph
-  // console.log('Wireframe may have changed', newWireframe)
  sceneModel.traverse((child: MObject3D) => {
    if (child.userData[extrasNameKey] === modelName) {
      if (child.material && child.material.wireframe !== newWireframe) {
@@ -144,8 +122,6 @@ function onWireframeChange(newWireframe: boolean) {

 watch(wireframe, onWireframeChange);

-let {sceneDocument} = inject<{ sceneDocument: ShallowRef<Document> }>('sceneDocument')!!;
-
 function onClipPlanesChange() {
  let scene = props.viewer?.scene;
  let sceneModel = (scene as any)?._model;
@@ -202,19 +178,98 @@ watch(clipPlaneZ, onClipPlanesChange);
 watch(clipPlaneSwappedX, onClipPlanesChange);
 watch(clipPlaneSwappedY, onClipPlanesChange);
 watch(clipPlaneSwappedZ, onClipPlanesChange);
-// Clip planes are also affected by the camera position, so we need to listen to camera changes
-props.viewer!!.onElemReady((elem) => elem.addEventListener('camera-change', onClipPlanesChange))
+
+let edgeWidthChangeCleanup = [] as Array<() => void>;
+
+function onEdgeWidthChange(newEdgeWidth: number) {
+  let scene = props.viewer?.scene;
+  let sceneModel = (scene as any)?._model;
+  if (!scene || !sceneModel) return;
+  edgeWidthChangeCleanup.forEach((f) => f());
+  edgeWidthChangeCleanup = [];
+  let linesToImprove: Array<MObject3D> = [];
+  sceneModel.traverse((child: MObject3D) => {
+    if (child.userData[extrasNameKey] === modelName) {
+      if (child.type == 'Line' || child.type == 'LineSegments') {
+        // child.material.linewidth = 3; // Not supported in WebGL2
+        // Swap geometry with LineGeometry to support widths
+        // https://threejs.org/examples/?q=line#webgl_lines_fat
+        if (newEdgeWidth > 0) linesToImprove.push(child);
+      }
+      if (child.type == 'Points') {
+        (child.material as any).size = newEdgeWidth > 0 ? newEdgeWidth * 50 : 5;
+        child.material.needsUpdate = true;
+      }
+    }
+  });
+  linesToImprove.forEach(async (line: MObject3D) => {
+    let line2 = await toLineSegments(line.geometry, newEdgeWidth);
+    // Update resolution on resize
+    let resizeListener = (elem: HTMLElement) => {
+      line2.material.resolution.set(elem.clientWidth, elem.clientHeight);
+      line2.material.needsUpdate = true;
+    };
+    props.viewer!!.onElemReady((elem) => {
+      elem.addEventListener('resize', () => resizeListener(elem));
+      resizeListener(elem);
+    });
+    // Copy the transform of the original line
+    line2.position.copy(line.position);
+    line2.computeLineDistances();
+    line2.userData = Object.assign({}, line.userData);
+    line.parent!.add(line2);
+    line.children.forEach((o) => line2.add(o));
+    line.visible = false;
+    line.userData.niceLine = line2;
+    // line.parent!.remove(line); // Keep it for better raycast and selection!
+    line2.userData.noHit = true;
+    edgeWidthChangeCleanup.push(() => {
+      line2.parent!.remove(line2);
+      line.visible = true;
+      props.viewer!!.onElemReady((elem) => {
+        elem.removeEventListener('resize', () => resizeListener(elem));
+      });
+    });
+  });
+  scene.queueRender()
+}
+
+watch(edgeWidth, onEdgeWidthChange);

 function onModelLoad() {
  let scene = props.viewer?.scene;
  let sceneModel = (scene as any)?._model;
  if (!scene || !sceneModel) return;
-  // Iterate all primitives of the mesh and set their visibility based on the enabled features
-  // Use the scene graph instead of the document to avoid reloading the same model, at the cost
-  // of not actually removing the primitives from the scene graph
+
+  // Count the number of faces, edges and vertices
+  const isFirstLoad = faceCount.value === -1;
+  faceCount.value = props.meshes
+      .flatMap((m) => m.listPrimitives().filter(p => p.getMode() === WebGL2RenderingContext.TRIANGLES))
+      .map(p => (p.getExtras()?.face_triangles_end as any)?.length ?? 1)
+      .reduce((a, b) => a + b, 0)
+  edgeCount.value = props.meshes
+      .flatMap((m) => m.listPrimitives().filter(p => p.getMode() in [WebGL2RenderingContext.LINE_STRIP, WebGL2RenderingContext.LINES]))
+      .map(p => (p.getExtras()?.edge_points_end as any)?.length ?? 0)
+      .reduce((a, b) => a + b, 0)
+  vertexCount.value = props.meshes
+      .flatMap((m) => m.listPrimitives().filter(p => p.getMode() === WebGL2RenderingContext.POINTS))
+      .map(p => (p.getAttribute("POSITION")?.getCount() ?? 0))
+      .reduce((a, b) => a + b, 0)
+
+  // First time: set the enabled features to all provided features
+  if (isFirstLoad) {
+    if (faceCount.value === 0) enabledFeatures.value = enabledFeatures.value.filter((f) => f !== 0)
+    else if (!enabledFeatures.value.includes(0)) enabledFeatures.value.push(0)
+    if (edgeCount.value === 0) enabledFeatures.value = enabledFeatures.value.filter((f) => f !== 1)
+    else if (!enabledFeatures.value.includes(1)) enabledFeatures.value.push(1)
+    if (vertexCount.value === 0) enabledFeatures.value = enabledFeatures.value.filter((f) => f !== 2)
+    else if (!enabledFeatures.value.includes(2)) enabledFeatures.value.push(2)
+  }
+
+  // Add darkened back faces for all face objects to improve cutting planes
  let childrenToAdd: Array<MObject3D> = [];
-  let linesToImprove: Array<MObject3D> = [];
  sceneModel.traverse((child: MObject3D) => {
+    child.updateMatrixWorld();  // Objects are mostly static, so ensure updated matrices
    if (child.userData[extrasNameKey] === modelName) {
      if (child.type == 'Mesh' || child.type == 'SkinnedMesh') {
        // Compute a BVH for faster raycasting (MUCH faster selection)
@@ -236,44 +291,14 @@ function onModelLoad() {
          backChild.material = child.material.clone();
          backChild.material.side = BackSide;
          backChild.material.color = new Color(0.25, 0.25, 0.25)
-          child.userData.backChild = backChild;
          backChild.userData.noHit = true;
+          child.userData.backChild = backChild;
          childrenToAdd.push(backChild as MObject3D);
        }
      }
-      if (child.type == 'Line' || child.type == 'LineSegments') {
-        // child.material.linewidth = 3; // Not supported in WebGL2
-        // Swap geometry with LineGeometry to support widths
-        // https://threejs.org/examples/?q=line#webgl_lines_fat
-        linesToImprove.push(child);
-      }
-      if (child.type == 'Points') {
-        (child.material as any).size = 7;
-        child.material.needsUpdate = true;
-      }
    }
  });
  childrenToAdd.forEach((child: MObject3D) => sceneModel.add(child));
-  linesToImprove.forEach(async (line: MObject3D) => {
-    let line2 = await toLineSegments(line.geometry);
-    // Update resolution on resize
-    props.viewer!!.onElemReady((elem) => {
-      let l = () => {
-        line2.material.resolution.set(elem.clientWidth, elem.clientHeight);
-        line2.material.needsUpdate = true;
-      };
-      elem.addEventListener('resize', l); // TODO: Remove listener when line is replaced
-      l();
-    });
-    line2.computeLineDistances();
-    line2.userData = Object.assign({}, line.userData);
-    line.parent!.add(line2);
-    line.children.forEach((o) => line2.add(o));
-    line.visible = false;
-    line.userData.niceLine = line2;
-    // line.parent!.remove(line); // Keep it for better raycast and selection!
-    line2.userData.noHit = true;
-  });

  // Furthermore...
  // Enabled features may have been reset after a reload
@@ -284,94 +309,108 @@ function onModelLoad() {
  onWireframeChange(wireframe.value)
  // Clip planes may have been reset after a reload
  onClipPlanesChange()
+  // Edge width may have been reset after a reload
+  onEdgeWidthChange(edgeWidth.value)

  scene.queueRender()
 }

 // props.viewer.elem may not yet be available, so we need to wait for it
-props.viewer!!.onElemReady((elem) => elem.addEventListener('load', onModelLoad))
+const onViewerReady = (viewer: InstanceType<typeof ModelViewerWrapper>) => {
+  viewer?.onElemReady((elem: HTMLElement) => {
+    elem.addEventListener('before-render', onModelLoad);
+    elem.addEventListener('camera-change', onClipPlanesChange);
+  });
+};
+if (props.viewer) onViewerReady(props.viewer); else watch((() => props.viewer) as any, onViewerReady);
 </script>

 <template>
  <v-expansion-panel :value="modelName">
-    <v-expansion-panel-title expand-icon="hide-this-icon" collapse-icon="hide-this-icon">
-      <v-btn-toggle v-model="enabledFeatures" multiple @click.stop color="surface-light">
+    <v-expansion-panel-title collapse-icon="hide-this-icon" expand-icon="hide-this-icon">
+      <v-btn-toggle v-model="enabledFeatures" color="surface-light" multiple @click.stop>
        <v-btn icon>
          <v-tooltip activator="parent">Toggle Faces ({{ faceCount }})</v-tooltip>
-          <svg-icon type="mdi" :path="mdiRectangle" :rotate="90"></svg-icon>
+          <svg-icon :path="mdiRectangle" :rotate="90" type="mdi"></svg-icon>
        </v-btn>
        <v-btn icon>
          <v-tooltip activator="parent">Toggle Edges ({{ edgeCount }})</v-tooltip>
-          <svg-icon type="mdi" :path="mdiRectangleOutline" :rotate="90"></svg-icon>
+          <svg-icon :path="mdiRectangleOutline" :rotate="90" type="mdi"></svg-icon>
        </v-btn>
        <v-btn icon>
          <v-tooltip activator="parent">Toggle Vertices ({{ vertexCount }})</v-tooltip>
-          <svg-icon type="mdi" :path="mdiVectorRectangle" :rotate="90"></svg-icon>
+          <svg-icon :path="mdiVectorRectangle" :rotate="90" type="mdi"></svg-icon>
        </v-btn>
      </v-btn-toggle>
      <div class="model-name">{{ modelName }}</div>
      <v-spacer></v-spacer>
      <v-btn icon @click.stop="emit('remove')">
        <v-tooltip activator="parent">Remove</v-tooltip>
-        <svg-icon type="mdi" :path="mdiDelete"></svg-icon>
+        <svg-icon :path="mdiDelete" type="mdi"></svg-icon>
      </v-btn>
    </v-expansion-panel-title>
    <v-expansion-panel-text>
-      <v-slider v-model="opacity" hide-details min="0" max="1" :step="0.1">
+      <v-slider v-model="opacity" :step="0.1" hide-details max="1" min="0">
        <template v-slot:prepend>
          <v-tooltip activator="parent">Change opacity</v-tooltip>
-          <svg-icon type="mdi" :path="mdiCircleOpacity"></svg-icon>
+          <svg-icon :path="mdiCircleOpacity" type="mdi"></svg-icon>
        </template>
        <template v-slot:append>
          <v-tooltip activator="parent">Wireframe</v-tooltip>
-          <v-checkbox-btn trueIcon="mdi-triangle-outline" falseIcon="mdi-triangle" v-model="wireframe"></v-checkbox-btn>
+          <v-checkbox-btn v-model="wireframe" falseIcon="mdi-triangle" trueIcon="mdi-triangle-outline"></v-checkbox-btn>
+        </template>
+      </v-slider>
+      <v-slider v-if="edgeCount > 0 || vertexCount > 0" v-model="edgeWidth" hide-details max="1" min="0">
+        <template v-slot:prepend>
+          <v-tooltip activator="parent">Edge and vertex sizes</v-tooltip>
+          <svg-icon :path="mdiVectorLine" type="mdi"></svg-icon>
        </template>
      </v-slider>
      <v-divider></v-divider>
-      <v-slider v-model="clipPlaneX" hide-details min="0" max="1">
+      <v-slider v-model="clipPlaneX" hide-details max="1" min="0">
        <template v-slot:prepend>
          <v-tooltip activator="parent">Clip plane X</v-tooltip>
-          <svg-icon type="mdi" :path="mdiCube" :rotate="120"></svg-icon>
+          <svg-icon :path="mdiCube" :rotate="120" type="mdi"></svg-icon>
          X
        </template>
        <template v-slot:append>
          <v-tooltip activator="parent">Swap clip plane X</v-tooltip>
-          <v-checkbox-btn trueIcon="mdi-checkbox-marked-outline" falseIcon="mdi-checkbox-blank-outline"
-                          v-model="clipPlaneSwappedX">
+          <v-checkbox-btn v-model="clipPlaneSwappedX" falseIcon="mdi-checkbox-blank-outline"
+                          trueIcon="mdi-checkbox-marked-outline">
            <template v-slot:label>
-              <svg-icon type="mdi" :path="mdiSwapHorizontal"></svg-icon>
+              <svg-icon :path="mdiSwapHorizontal" type="mdi"></svg-icon>
            </template>
          </v-checkbox-btn>
        </template>
      </v-slider>
-      <v-slider v-model="clipPlaneZ" hide-details min="0" max="1">
+      <v-slider v-model="clipPlaneZ" hide-details max="1" min="0">
        <template v-slot:prepend>
          <v-tooltip activator="parent">Clip plane Y</v-tooltip>
-          <svg-icon type="mdi" :path="mdiCube" :rotate="-120"></svg-icon>
+          <svg-icon :path="mdiCube" :rotate="-120" type="mdi"></svg-icon>
          Y
        </template>
        <template v-slot:append>
          <v-tooltip activator="parent">Swap clip plane Y</v-tooltip>
-          <v-checkbox-btn trueIcon="mdi-checkbox-marked-outline" falseIcon="mdi-checkbox-blank-outline"
-                          v-model="clipPlaneSwappedZ">
+          <v-checkbox-btn v-model="clipPlaneSwappedZ" falseIcon="mdi-checkbox-blank-outline"
+                          trueIcon="mdi-checkbox-marked-outline">
            <template v-slot:label>
-              <svg-icon type="mdi" :path="mdiSwapHorizontal"></svg-icon>
+              <svg-icon :path="mdiSwapHorizontal" type="mdi"></svg-icon>
            </template>
          </v-checkbox-btn>
        </template>
      </v-slider>
-      <v-slider v-model="clipPlaneY" hide-details min="0" max="1">
+      <v-slider v-model="clipPlaneY" hide-details max="1" min="0">
        <template v-slot:prepend>
          <v-tooltip activator="parent">Clip plane Z</v-tooltip>
-          <svg-icon type="mdi" :path="mdiCube"></svg-icon>
+          <svg-icon :path="mdiCube" type="mdi"></svg-icon>
          Z
        </template>
        <template v-slot:append>
          <v-tooltip activator="parent">Swap clip plane Z</v-tooltip>
-          <v-checkbox-btn trueIcon="mdi-checkbox-marked-outline" falseIcon="mdi-checkbox-blank-outline"
-                          v-model="clipPlaneSwappedY">
+          <v-checkbox-btn v-model="clipPlaneSwappedY" falseIcon="mdi-checkbox-blank-outline"
+                          trueIcon="mdi-checkbox-marked-outline">
            <template v-slot:label>
-              <svg-icon type="mdi" :path="mdiSwapHorizontal"></svg-icon>
+              <svg-icon :path="mdiSwapHorizontal" type="mdi"></svg-icon>
            </template>
          </v-checkbox-btn>
        </template>
--- a/frontend/models/Models.vue
+++ b/frontend/models/Models.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import {VExpansionPanels} from "vuetify/lib/components/index.mjs";
 import type ModelViewerWrapper from "../viewer/ModelViewerWrapper.vue";
 import {Document, Mesh} from "@gltf-transform/core";
@@ -36,9 +36,7 @@ function onRemove(mesh: Mesh) {
 }

 function findModel(name: string) {
-  console.log('Find model', name);
  if (!expandedNames.value.includes(name)) expandedNames.value.push(name);
-  console.log('Expanded', expandedNames.value);
 }

 defineExpose({findModel})
--- a/frontend/shims.d.ts
+++ b/frontend/shims.d.ts
@@ -1,3 +1,5 @@
 // Avoids typescript error when importing some files
 declare module '@jamescoyle/vue-icon'
 declare module 'three-orientation-gizmo/src/OrientationGizmo'
+declare module 'three/examples/jsm/libs/draco/draco_decoder.js'
+declare module 'three/examples/jsm/libs/draco/draco_encoder.js'
--- a/frontend/tools/LicensesDialogContent.vue
+++ b/frontend/tools/LicensesDialogContent.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 // License text for all dependencies, only downloaded when/if needed
 // @ts-ignore
 import licenseText from "../../assets/licenses.txt?raw";
--- a/frontend/tools/OrientationGizmo.vue
+++ b/frontend/tools/OrientationGizmo.vue
@@ -1,18 +1,16 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import {onMounted, onUpdated, ref} from "vue";
 import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
 import * as OrientationGizmoRaw from "three-orientation-gizmo/src/OrientationGizmo";
-import type {ModelViewerElement} from '@google/model-viewer';

 // Optimized minimal dependencies from three
 import {Vector3} from "three/src/math/Vector3.js";
 import {Matrix4} from "three/src/math/Matrix4.js";
+import type ModelViewerWrapper from "../viewer/ModelViewerWrapper.vue";

 (globalThis as any).THREE = {Vector3, Matrix4} as any // HACK: Required for the gizmo to work

-const OrientationGizmo = OrientationGizmoRaw.default;
-
-const props = defineProps<{ elem: ModelViewerElement | null, scene: ModelScene }>();
+const props = defineProps<{ viewer: InstanceType<typeof ModelViewerWrapper> }>();

 function createGizmo(expectedParent: HTMLElement, scene: ModelScene): HTMLElement {
  // noinspection SpellCheckingInspection
@@ -33,21 +31,26 @@ function createGizmo(expectedParent: HTMLElement, scene: ModelScene): HTMLElemen
  }
  // Append and listen for events
  gizmo.onAxisSelected = (axis: { direction: { x: any; y: any; z: any; }; }) => {
-    let lookFrom = scene.getCamera().position.clone();
-    let lookAt = scene.getTarget().clone().add(scene.target.position);
-    let magnitude = lookFrom.clone().sub(lookAt).length()
-    let direction = new Vector3(axis.direction.x, axis.direction.y, axis.direction.z);
-    let newLookFrom = lookAt.clone().add(direction.clone().multiplyScalar(magnitude));
-    //console.log("New camera position", newLookFrom)
-    scene.getCamera().position.copy(newLookFrom);
-    scene.getCamera().lookAt(lookAt);
-    if ((scene as any).__perspectiveCamera) { // HACK: Make the hacky ortho also work
-      (scene as any).__perspectiveCamera.position.copy(newLookFrom);
-      (scene as any).__perspectiveCamera.lookAt(lookAt);
+    if (!props.viewer.elem || !props.viewer.controls) return;
+    // Animate the controls to the new wanted angle
+    const controls = props.viewer.controls;
+    const {theta: curTheta/*, phi: curPhi*/} = (controls as any).goalSpherical;
+    let wantedTheta = NaN;
+    let wantedPhi = NaN;
+    let attempt = 0
+    while ((attempt == 0 || curTheta == wantedTheta) && attempt < 2) {
+      if (attempt > 0) { // Flip the camera if the user clicks on the same axis
+        axis.direction.x = -axis.direction.x;
+        axis.direction.y = -axis.direction.y;
+        axis.direction.z = -axis.direction.z;
+      }
+      wantedTheta = Math.atan2(axis.direction.x, axis.direction.z);
+      wantedPhi = Math.asin(-axis.direction.y) + Math.PI / 2;
+      attempt++;
    }
+    controls.setOrbit(wantedTheta, wantedPhi);
+    props.viewer.elem?.dispatchEvent(new CustomEvent('camera-change', {detail: {source: 'none'}}))
    scene.queueRender();
-    requestIdleCallback(() => props.elem?.dispatchEvent(
-        new CustomEvent('camera-change', {detail: {source: 'none'}})), {timeout: 100})
  }
  return gizmo;
 }
@@ -65,9 +68,9 @@ function updateGizmo() {
 }

 let reinstall = () => {
-  if(!container.value) return;
+  if (!container.value) return;
  if (gizmo) container.value.removeChild(gizmo);
-  gizmo = createGizmo(container.value, props.scene as ModelScene) as typeof gizmo;
+  gizmo = createGizmo(container.value, props.viewer.scene!! as any) as typeof gizmo;
  container.value.appendChild(gizmo);
  requestIdleCallback(updateGizmo, {timeout: 250}); // Low priority updates
 }
--- a/frontend/tools/Selection.vue
+++ b/frontend/tools/Selection.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import {defineModel, inject, ref, type ShallowRef, watch} from "vue";
 import {VBtn, VSelect, VTooltip} from "vuetify/lib/components/index.mjs";
 import SvgIcon from '@jamescoyle/vue-icon';
@@ -33,21 +33,23 @@ let showBoundingBox = ref<Boolean>(false); // Enabled automatically on start
 let showDistances = ref<Boolean>(true);

 let mouseDownAt: [number, number] | null = null;
+let mouseDownTime = 0;
 let selectFilter = ref('Any (S)');
 const raycaster = new Raycaster();


-let selectionMoveListener = (event: MouseEvent) => {
+let mouseDownListener = (event: MouseEvent) => {
  mouseDownAt = [event.clientX, event.clientY];
+  mouseDownTime = performance.now();
  if (!selectionEnabled.value) return;
 };

-let selectionListener = (event: MouseEvent) => {
+let mouseUpListener = (event: MouseEvent) => {
  // If the mouse moved while clicked (dragging), avoid selection logic
  if (mouseDownAt) {
    let [x, y] = mouseDownAt;
    mouseDownAt = null;
-    if (Math.abs(event.clientX - x) > 5 || Math.abs(event.clientY - y) > 5) {
+    if (Math.abs(event.clientX - x) > 5 || Math.abs(event.clientY - y) > 5 || performance.now() - mouseDownTime > 500) {
      return;
    }
  }
@@ -254,14 +256,29 @@ let onViewerReady = (viewer: typeof ModelViewerWrapperT) => {
  viewer.onElemReady((elem: ModelViewerElement) => {
    if (hasListeners) return;
    hasListeners = true;
-    elem.addEventListener('mouseup', selectionListener);
-    elem.addEventListener('mousedown', selectionMoveListener); // Avoid clicking when dragging
-    elem.addEventListener('load', () => {
+    elem.addEventListener('mousedown', mouseDownListener); // Avoid clicking when dragging
+    elem.addEventListener('mouseup', mouseUpListener);
+    elem.addEventListener('before-render', () => {
+      // After a reload of the scene, we need to recover object references and highlight them again
+      for (let sel of selected.value) {
+        let scene = props.viewer?.scene;
+        if (!scene) continue;
+        let foundObject = null;
+        scene.traverse((obj: MObject3D) => {
+          if (sel.matches(obj)) {
+            foundObject = obj as MObject3D;
+          }
+        });
+        if (foundObject) {
+          sel.object = foundObject;
+          highlight(sel);
+        } else {
+          selected.value = selected.value.filter((m) => m.getKey() !== sel.getKey());
+        }
+      }
      if (firstLoad) {
        toggleShowBoundingBox();
        firstLoad = false;
-      } else {
-        updateBoundingBox();
      }
    });
    elem.addEventListener('camera-change', onCameraChange);
@@ -406,6 +423,8 @@ function updateDistances() {
  return;
 }

+defineExpose({deselect, updateBoundingBox, updateDistances});
+
 // Add keyboard shortcuts
 window.addEventListener('keydown', (event) => {
  if (event.key === 's') {
@@ -443,52 +462,41 @@ window.addEventListener('keydown', (event) => {
 </script>

 <template>
-  <div class="select-parent">
-    <v-btn icon @click="toggleSelection" :color="selectionEnabled ? 'surface-light' : ''">
-      <v-tooltip activator="parent">{{ selectionEnabled ? 'Disable (s)election mode' : 'Enable (s)election mode' }}
-      </v-tooltip>
-      <svg-icon type="mdi" :path="mdiCursorDefaultClick"/>
-    </v-btn>
-    <v-tooltip :text="'Select only '  + selectFilter.toString().toLocaleLowerCase()" :open-on-click="false">
-      <template v-slot:activator="{ props }">
-        <v-select v-bind="props" class="select-only" variant="underlined"
-                  :items="['Any (S)', '(F)aces', '(E)dges', '(V)ertices']"
-                  v-model="selectFilter"/>
-      </template>
+  <v-btn :color="selectionEnabled ? 'surface-light' : ''" icon @click="toggleSelection">
+    <v-tooltip activator="parent">{{ selectionEnabled ? 'Disable (s)election mode' : 'Enable (s)election mode' }}
    </v-tooltip>
-  </div>
-  <v-btn icon @click="toggleHighlightNextSelection" :color="highlightNextSelection[0] ? 'surface-light' : ''">
-    <v-tooltip activator="parent">(H)ighlight the next clicked element in the models list</v-tooltip>
-    <svg-icon type="mdi" :path="mdiFeatureSearch"/>
+    <svg-icon :path="mdiCursorDefaultClick" type="mdi"/>
  </v-btn>
-  <v-btn icon @click="toggleShowBoundingBox" :color="showBoundingBox ? 'surface-light' : ''">
+  <v-tooltip :open-on-click="false" :text="'Select only '  + selectFilter.toString().toLocaleLowerCase()">
+    <template v-slot:activator="{ props }">
+      <v-select v-model="selectFilter" :items="['Any (S)', '(F)aces', '(E)dges', '(V)ertices']" class="select-only"
+                v-bind="props"
+                variant="underlined"/>
+    </template>
+  </v-tooltip>
+  <v-btn :color="highlightNextSelection[0] ? 'surface-light' : ''" icon @click="toggleHighlightNextSelection">
+    <v-tooltip activator="parent">(H)ighlight the next clicked element in the models list</v-tooltip>
+    <svg-icon :path="mdiFeatureSearch" type="mdi"/>
+  </v-btn>
+  <v-btn :color="showBoundingBox ? 'surface-light' : ''" icon @click="toggleShowBoundingBox">
    <v-tooltip activator="parent">{{ showBoundingBox ? 'Hide selection (b)ounds' : 'Show selection (b)ounds' }}
    </v-tooltip>
-    <svg-icon type="mdi" :path="mdiCubeOutline"/>
+    <svg-icon :path="mdiCubeOutline" type="mdi"/>
  </v-btn>
-  <v-btn icon @click="toggleShowDistances" :color="showDistances ? 'surface-light' : ''">
+  <v-btn :color="showDistances ? 'surface-light' : ''" icon @click="toggleShowDistances">
    <v-tooltip activator="parent">
      {{ showDistances ? 'Hide selection (d)istances' : 'Show (d)istances (when a pair of features is selected)' }}
    </v-tooltip>
-    <svg-icon type="mdi" :path="mdiRuler"/>
+    <svg-icon :path="mdiRuler" type="mdi"/>
  </v-btn>
 </template>

 <style scoped>
-/* Very hacky styling... */
-.select-parent {
-  height: 48px;
-}
-
-.select-parent .v-btn {
-  position: relative;
-  top: -20px;
-}
-
 .select-only {
-  display: inline-block;
-  width: calc(100% - 48px);
+  float: right;
+  height: 36px;
  position: relative;
  top: -12px;
+  width: calc(100% - 48px);
 }
 </style>
--- a/frontend/tools/Tools.vue
+++ b/frontend/tools/Tools.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import {
  VBtn,
  VCard,
@@ -16,10 +16,9 @@ import {OrthographicCamera} from "three/src/cameras/OrthographicCamera.js";
 import {mdiClose, mdiCrosshairsGps, mdiDownload, mdiGithub, mdiLicense, mdiProjector} from '@mdi/js'
 import SvgIcon from '@jamescoyle/vue-icon';
 import type {ModelViewerElement} from '@google/model-viewer';
-import type {MObject3D} from "./Selection.vue";
 import Loading from "../misc/Loading.vue";
 import type ModelViewerWrapper from "../viewer/ModelViewerWrapper.vue";
-import {defineAsyncComponent, type Ref, ref} from "vue";
+import {defineAsyncComponent, ref, type Ref} from "vue";
 import type {SelectionInfo} from "./selection";

 const SelectionComponent = defineAsyncComponent({
@@ -57,14 +56,14 @@ function syncOrthoCamera(force: boolean) {
    let h = perspectiveWidthAtCenter / scene.aspect;
    (scene as any).camera = new OrthographicCamera(-w, w, h, -h, perspectiveCam.near, perspectiveCam.far);
    scene.camera.position.copy(perspectiveCam.position);
-    scene.camera.lookAt(lookAtCenter);
+    scene.camera.rotation.copy(perspectiveCam.rotation);
    if (force) scene.queueRender() // Force rerender of model-viewer
    requestAnimationFrame(() => syncOrthoCamera(false));
  }
 }

 let toggleProjectionText = ref('PERSP'); // Default to perspective camera
-function toggleProjection() {
+async function toggleProjection() {
  let scene = props.viewer?.scene;
  if (!scene) return;
  let prevCam = scene.camera;
@@ -79,16 +78,16 @@ function toggleProjection() {
    scene.queueRender() // Force rerender of model-viewer
  }
  toggleProjectionText.value = wasPerspectiveCamera ? 'ORTHO' : 'PERSP';
-  // The camera change may take a few frames to take effect, dispatch the event after a delay
-  requestIdleCallback(() => props.viewer?.elem?.dispatchEvent(
-      new CustomEvent('camera-change', {detail: {source: 'none'}})), {timeout: 100})
+  // The camera change may take a frame to take effect, dispatch the event after a delay
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+  props.viewer?.elem?.dispatchEvent(new CustomEvent('camera-change', {detail: {source: 'none'}}));
 }

 async function centerCamera() {
  let viewerEl: ModelViewerElement | null | undefined = props.viewer?.elem;
  if (!viewerEl) return;
-  await viewerEl.updateFraming();
-  viewerEl.zoom(3);
+  props.viewer?.scene?.setTarget(0, 0, 0); // Center the target
+  viewerEl.zoom(-1000000); // Max zoom out
 }


@@ -107,6 +106,15 @@ async function openGithub() {
  window.open('https://github.com/yeicor-3d/yet-another-cad-viewer', '_blank')
 }

+function removeObjectSelections(objName: string) {
+  for (let selInfo of selection.value.filter((s) => s.getObjectName() === objName)) {
+    selectionComp.value?.deselect(selInfo);
+  }
+  selectionComp.value?.updateBoundingBox();
+  selectionComp.value?.updateDistances();
+}
+
+defineExpose({removeObjectSelections});

 // Add keyboard shortcuts
 window.addEventListener('keydown', (event) => {
@@ -118,35 +126,35 @@ window.addEventListener('keydown', (event) => {
 </script>

 <template>
-  <orientation-gizmo :scene="props.viewer.scene as any" :elem="props.viewer.elem" v-if="props.viewer?.scene"/>
+  <orientation-gizmo v-if="props.viewer?.scene" :viewer="props.viewer"/>
  <v-divider/>
  <h5>Camera</h5>
  <v-btn icon @click="toggleProjection"><span class="icon-detail">{{ toggleProjectionText }}</span>
    <v-tooltip activator="parent">Toggle (P)rojection<br/>(currently
      {{ toggleProjectionText === 'PERSP' ? 'perspective' : 'orthographic' }})
    </v-tooltip>
-    <svg-icon type="mdi" :path="mdiProjector"></svg-icon>
+    <svg-icon :path="mdiProjector" type="mdi"></svg-icon>
  </v-btn>
  <v-btn icon @click="centerCamera">
    <v-tooltip activator="parent">Re(c)enter Camera</v-tooltip>
-    <svg-icon type="mdi" :path="mdiCrosshairsGps"/>
+    <svg-icon :path="mdiCrosshairsGps" type="mdi"/>
  </v-btn>
  <v-divider/>
  <h5>Selection ({{ selectionFaceCount() }}F {{ selectionEdgeCount() }}E {{ selectionVertexCount() }}V)</h5>
-  <selection-component :ref="selectionComp as any" :viewer="props.viewer as any" v-model="selection"
+  <selection-component ref="selectionComp" v-model="selection" :viewer="props.viewer as any"
                       @findModel="(name) => emit('findModel', name)"/>
  <v-divider/>
  <v-spacer></v-spacer>
  <h5>Extras</h5>
  <v-btn icon @click="downloadSceneGlb">
    <v-tooltip activator="parent">(D)ownload Scene</v-tooltip>
-    <svg-icon type="mdi" :path="mdiDownload"/>
+    <svg-icon :path="mdiDownload" type="mdi"/>
  </v-btn>
  <v-dialog id="licenses-dialog" fullscreen>
    <template v-slot:activator="{ props }">
      <v-btn icon v-bind="props">
        <v-tooltip activator="parent">Show Licenses</v-tooltip>
-        <svg-icon type="mdi" :path="mdiLicense"/>
+        <svg-icon :path="mdiLicense" type="mdi"/>
      </v-btn>
    </template>
    <template v-slot:default="{ isActive }">
@@ -156,7 +164,7 @@ window.addEventListener('keydown', (event) => {
          <v-spacer>
          </v-spacer>
          <v-btn icon @click="isActive.value = false">
-            <svg-icon type="mdi" :path="mdiClose"/>
+            <svg-icon :path="mdiClose" type="mdi"/>
          </v-btn>
        </v-toolbar>
        <v-card-text>
@@ -167,7 +175,7 @@ window.addEventListener('keydown', (event) => {
  </v-dialog>
  <v-btn icon @click="openGithub">
    <v-tooltip activator="parent">Open (G)itHub</v-tooltip>
-    <svg-icon type="mdi" :path="mdiGithub"/>
+    <svg-icon :path="mdiGithub" type="mdi"/>
  </v-btn>
  <div ref="statsHolder"></div>
 </template>
@@ -187,4 +195,8 @@ window.addEventListener('keydown', (event) => {
  position: relative;
  top: 5px;
 }
+
+h5 {
+  font-size: 14px;
+}
 </style>
--- a/frontend/tools/selection.ts
+++ b/frontend/tools/selection.ts
@@ -3,6 +3,7 @@
 import type {MObject3D} from "./Selection.vue";
 import type {Intersection} from "three";
 import {Box3} from "three";
+import {extrasNameKey} from "../misc/gltf";

 /** Information about a single item in the selection */
 export class SelectionInfo {
@@ -19,6 +20,17 @@ export class SelectionInfo {
        this.indices = indices;
    }

+    public getObjectName() {
+        return this.object.userData[extrasNameKey];
+    }
+
+    public matches(object: MObject3D) {
+        return this.getObjectName() === object.userData[extrasNameKey] &&
+            (this.kind === 'face' && (object.type === 'Mesh' || object.type === 'SkinnedMesh') ||
+                this.kind === 'edge' && (object.type === 'Line' || object.type === 'LineSegments') ||
+                this.kind === 'vertex' && object.type === 'Points')
+    }
+
    public getKey() {
        return this.object.uuid + this.kind + this.indices[0].toFixed() + this.indices[1].toFixed();
    }
--- a/frontend/viewer/ModelViewerWrapper.vue
+++ b/frontend/viewer/ModelViewerWrapper.vue
@@ -1,15 +1,16 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import {settings} from "../misc/settings";
 import {inject, onMounted, type Ref, ref, watch} from "vue";
-import {VList, VListItem} from "vuetify/lib/components/index.mjs";
 import {$renderer, $scene} from "@google/model-viewer/lib/model-viewer-base";
+import {$controls} from '@google/model-viewer/lib/features/controls.js';
+import {type SmoothControls} from '@google/model-viewer/lib/three-components/SmoothControls';
 import {ModelViewerElement} from '@google/model-viewer';
 import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
 import {Hotspot} from "@google/model-viewer/lib/three-components/Hotspot";
 import type {Renderer} from "@google/model-viewer/lib/three-components/Renderer";
 import type {Vector3} from "three";
-import { computeBoundsTree, disposeBoundsTree, acceleratedRaycast } from 'three-mesh-bvh';
 import {BufferGeometry, Mesh} from "three";
+import {acceleratedRaycast, computeBoundsTree, disposeBoundsTree} from 'three-mesh-bvh';

 ModelViewerElement.modelCacheSize = 0; // Also needed to avoid tree shaking
 //@ts-ignore
@@ -19,30 +20,96 @@ BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree;
 //@ts-ignore
 Mesh.prototype.raycast = acceleratedRaycast;

-const emit = defineEmits<{ load: [] }>()
-
 const props = defineProps<{ src: string }>();

 const elem = ref<ModelViewerElement | null>(null);
 const scene = ref<ModelScene | null>(null);
 const renderer = ref<Renderer | null>(null);
+const controls = ref<SmoothControls | null>(null);

+
+let lastCameraTargetPosition: Vector3 | undefined = undefined;
+let lastCameraZoom: number | undefined = undefined;
+let lastCameraUrl = props.src.toString();
 onMounted(() => {
  if (!elem.value) return;
-  elem.value.addEventListener('load', async () => {
+  elem.value.addEventListener('before-render', () => {
    if (!elem.value) return;
-    // Delete the initial load banner
-    let banner = elem.value.querySelector('.initial-load-banner');
-    if (banner) banner.remove();
-    // Set the scene and renderer
+    // Extract internals of model-viewer in order to hack unsupported features
    scene.value = elem.value[$scene] as ModelScene;
    renderer.value = elem.value[$renderer] as Renderer;
-    // Emit the load event
-    emit('load')
+    controls.value = (elem.value as any)[$controls] as SmoothControls;
+    // Recover the camera position if it was set before
+    if (lastCameraTargetPosition) {
+      // console.log("RESTORING camera position?", lastCameraTargetPosition);
+      scene.value.setTarget(-lastCameraTargetPosition.x, -lastCameraTargetPosition.y, -lastCameraTargetPosition.z);
+      scene.value.jumpToGoal(); // Avoid move animation
+    }
+    (async () => {
+      let tries = 0
+      while (tries++ < 25) {
+        if (!lastCameraZoom || !elem.value?.getCameraOrbit()?.radius) break;
+        let change = lastCameraZoom - elem.value.getCameraOrbit().radius;
+        //console.log("Zooming to", lastCameraZoom, "from", elem.value.getCameraOrbit().radius, "change", change);
+        if (Math.abs(change) < 0.001) break;
+        elem.value.zoom(-Math.sign(change) * (Math.pow(Math.abs(change) + 1, 0.9) - 1)); // Arbitrary, experimental
+        elem.value.jumpCameraToGoal();
+        await elem.value.updateComplete;
+      }
+      //console.log("Ready to save!")
+      lastCameraUrl = props.src.toString();
+    })();
  });
  elem.value.addEventListener('camera-change', onCameraChange);
+  elem.value.addEventListener('progress', (ev) => onProgress((ev as any).detail.totalProgress));
 });

+function onCameraChange() {
+  // Remember the camera position to keep it in case of scene changes
+  if (scene.value && props.src.toString() == lastCameraUrl) {  // Don't overwrite with initial unwanted positions
+    lastCameraTargetPosition = scene.value.target.position.clone();
+    lastCameraZoom = elem.value?.getCameraOrbit()?.radius;
+    //console.log("Saving camera?", lastCameraTargetPosition, lastCameraZoom);
+  }
+  // Also need to update the SVG overlay
+  for (let lineId in lines.value) {
+    onCameraChangeLine(lineId as any);
+  }
+}
+
+// Handles loading the events for <model-viewer>'s slotted progress bar
+const progressBar = ref<HTMLElement | null>(null);
+const updateBar = ref<HTMLElement | null>(null);
+let onProgressHideTimeout: number | null = null;
+const onProgress = (totalProgress: number) => {
+  if (!progressBar.value || !updateBar.value) return;
+  // Update the progress bar and ensure it's visible
+  progressBar.value.style.display = 'block';
+  progressBar.value.style.opacity = '1'; // Fade in
+  updateBar.value.style.width = `${totalProgress * 100}%`;
+  // Auto-hide smoothly when no progress is made for a while
+  if (onProgressHideTimeout) clearTimeout(onProgressHideTimeout);
+  onProgressHideTimeout = setTimeout(() => {
+    if (!progressBar.value) return;
+    progressBar.value.style.opacity = '0'; // Fade out
+    setTimeout(() => {
+      if (!progressBar.value) return;
+      progressBar.value.style.display = 'none'; // Actually hide
+    }, 300); // 0.3s fade out
+  }, 1000);
+};
+
+const poster = ref<string>("")
+const setPosterText = (newText: string) => {
+  poster.value = "data:image/svg+xml;charset=utf-8;base64," + btoa(
+      '<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" fill="gray">' +
+      '<text x="50%" y="0%" dominant-baseline="middle" text-anchor="middle" font-size="48px">' +
+      newText +
+      '</text>' +
+      '</svg>')
+}
+setPosterText("Loading...")
+
 class Line3DData {
  startHotspot: HTMLElement = document.body
  endHotspot: HTMLElement = document.body
@@ -95,13 +162,6 @@ function removeLine3D(id: number): boolean {
  return true;
 }

-function onCameraChange() {
-  // Need to update the SVG overlay
-  for (let lineId in lines.value) {
-    onCameraChangeLine(lineId as any);
-  }
-}
-
 let svg = ref<SVGElement | null>(null);

 function onCameraChangeLine(lineId: number) {
@@ -137,48 +197,47 @@ function entries(lines: { [id: number]: Line3DData }): [string, Line3DData][] {
  return Object.entries(lines);
 }

-defineExpose({elem, onElemReady, scene, renderer, addLine3D, removeLine3D});
+defineExpose({elem, onElemReady, scene, renderer, controls, addLine3D, removeLine3D, onProgress, setPosterText});

 let {disableTap} = inject<{ disableTap: Ref<boolean> }>('disableTap')!!;
-watch(disableTap, (value) => {
-  // Rerender not auto triggered? This works anyway...
-  if (value) elem.value?.setAttribute('disable-tap', '');
-  else elem.value?.removeAttribute('disable-tap');
+watch(disableTap, (newDisableTap) => {
+  if (elem.value) elem.value.disableTap = newDisableTap;
 });
 </script>

 <template>
  <!-- The main 3D model viewer -->
-  <model-viewer ref="elem" 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"
-                min-camera-orbit="-Infinity 0deg 5%" :disable-tap="disableTap" :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">
-    <slot></slot> <!-- Controls, annotations, etc. -->
-    <div class="annotation initial-load-banner">
-      Trying to load models from...
-      <v-list v-for="src in settings.preload" :key="src">
-        <v-list-item>{{ src }}</v-list-item>
-      </v-list>
-      <!-- Too much idle CPU usage: <loading></loading> -->
+  <model-viewer ref="elem" :ar="settings.arModes.length > 0" :ar-modes="settings.arModes" :autoplay="settings.autoplay"
+                :environment-image="settings.background" :exposure="settings.exposure"
+                :orbit-sensitivity="settings.orbitSensitivity" :pan-sensitivity="settings.panSensitivity"
+                :poster="poster" :shadow-intensity="settings.shadowIntensity" :skybox-image="settings.background"
+                :src="props.src" :zoom-sensitivity="settings.zoomSensitivity" alt="The 3D model(s)" camera-controls
+                camera-orbit="30deg 75deg auto" interaction-prompt="none" max-camera-orbit="Infinity 180deg auto"
+                min-camera-orbit="-Infinity 0deg 5%" style="width: 100%; height: 100%">
+    <slot></slot>
+    <!-- Add a progress bar to the top of the model viewer -->
+    <div ref="progressBar" slot="progress-bar" class="progress-bar">
+      <div ref="updateBar" class="update-bar"/>
    </div>
  </model-viewer>

  <!-- The SVG overlay for fake 3D lines attached to the model -->
  <div class="overlay-svg-wrapper">
-    <svg ref="svg" class="overlay-svg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+    <svg ref="svg" class="overlay-svg" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
      <g v-for="[lineId, line] in entries(lines)" :key="lineId">
-        <line :x1="line.start2D[0]" :y1="line.start2D[1]" :x2="line.end2D[0]"
+        <line :x1="line.start2D[0]" :x2="line.end2D[0]" :y1="line.start2D[1]"
              :y2="line.end2D[1]" v-bind="line.lineAttrs"/>
        <g v-if="line.centerText !== undefined">
-          <rect :x="(line.start2D[0] + line.end2D[0]) / 2 - line.centerTextSize[0]/2 - 4"
-                :y="(line.start2D[1] + line.end2D[1]) / 2 - line.centerTextSize[1]/2 - 2"
-                :width="line.centerTextSize[0] + 8" :height="line.centerTextSize[1] + 4"
-                fill="gray" fill-opacity="0.75" rx="4" ry="4" stroke="black" v-if="line.centerText"/>
-          <text :x="(line.start2D[0] + line.end2D[0]) / 2" :y="(line.start2D[1] + line.end2D[1]) / 2"
-                text-anchor="middle" dominant-baseline="middle" font-size="16" fill="black"
-                :class="'line' + lineId + '_text'" v-if="line.centerText">
+          <rect v-if="line.centerText"
+                :height="line.centerTextSize[1] + 4"
+                :width="line.centerTextSize[0] + 8"
+                :x="(line.start2D[0] + line.end2D[0]) / 2 - line.centerTextSize[0]/2 - 4"
+                :y="(line.start2D[1] + line.end2D[1]) / 2 - line.centerTextSize[1]/2 - 2" fill="gray"
+                fill-opacity="0.75" rx="4" ry="4" stroke="black"/>
+          <text v-if="line.centerText" :class="'line' + lineId + '_text'"
+                :x="(line.start2D[0] + line.end2D[0]) / 2" :y="(line.start2D[1] + line.end2D[1]) / 2"
+                dominant-baseline="middle" fill="black"
+                font-size="16" text-anchor="middle">
            {{ line.centerText }}
          </text>
        </g>
@@ -213,14 +272,29 @@ watch(disableTap, (value) => {
  pointer-events: none;
 }

-.initial-load-banner {
-  width: 300px;
-  margin: auto;
-  margin-top: 3em;
-  overflow: hidden;
+.progress-bar {
+  display: block;
+  pointer-events: none;
+  width: 100%;
+  height: 10%;
+  max-height: 2%;
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translate3d(-50%, 0%, 0);
+  border-radius: 25px;
+  box-shadow: 0 3px 10px 3px rgba(0, 0, 0, 0.5), 0 0 5px 1px rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity 0.3s;
 }

-.initial-load-banner .v-list-item {
-  overflow: hidden;
+.update-bar {
+  background-color: rgba(255, 255, 255, 0.9);
+  width: 0;
+  height: 100%;
+  border-radius: 25px;
+  float: left;
+  transition: width 0.3s;
 }
 </style>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "yet-another-cad-viewer",
-  "version": "0.7.0",
+  "version": "0.8.8",
  "description": "",
  "license": "MIT",
  "private": true,
@@ -15,22 +15,23 @@
    "update-licenses": "generate-license-file --input package.json --output assets/licenses.txt --overwrite"
  },
  "dependencies": {
-    "@gltf-transform/core": "^3.10.0",
+    "@gltf-transform/core": "^3.10.1",
+    "@gltf-transform/extensions": "^3.10.1",
    "@gltf-transform/functions": "^3.10.1",
    "@google/model-viewer": "^3.4.0",
    "@jamescoyle/vue-icon": "^0.1.2",
    "@mdi/js": "^7.4.47",
    "@mdi/svg": "^7.4.47",
-    "three": "^0.162.0",
+    "three": "^0.160.1",
    "three-mesh-bvh": "^0.7.3",
    "three-orientation-gizmo": "https://github.com/jrj2211/three-orientation-gizmo",
    "vue": "^3.4.21",
-    "vuetify": "^3.5.11"
+    "vuetify": "^3.5.13"
  },
  "devDependencies": {
-    "@tsconfig/node20": "^20.1.3",
-    "@types/node": "^20.11.30",
-    "@types/three": "^0.162.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.12.2",
+    "@types/three": "^0.160.0",
    "@vitejs/plugin-vue": "^5.0.3",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "@vue/tsconfig": "^0.5.1",
@@ -38,9 +39,9 @@
    "commander": "^12.0.0",
    "generate-license-file": "^3.0.1",
    "npm-run-all2": "^6.1.1",
-    "terser": "^5.29.2",
+    "terser": "^5.30.0",
    "typescript": "~5.4.3",
-    "vite": "^5.2.6",
+    "vite": "^5.2.7",
    "vue-tsc": "^2.0.7"
  }
 }
--- a/poetry.lock
+++ b/poetry.lock
@@ -34,12 +34,12 @@ test = ["astroid (>=1,<2)", "astroid (>=2,<4)", "pytest"]

 [[package]]
 name = "build123d"
-version = "0.4.0"
+version = "0.5.0"
 description = "A python CAD programming library"
 optional = false
 python-versions = ">=3.9"
 files = [
-    {file = "build123d-0.4.0-py3-none-any.whl", hash = "sha256:1a94089dea2427e09cae9b023c01ac9cb6fd0a61faf015252eb139af4263e180"},
+    {file = "build123d-0.5.0-py3-none-any.whl", hash = "sha256:d0a4e82cdb0e53ef21fca8d2c84124351d7c7070077b5efa173d789002c8194c"},
 ]

 [package.dependencies]
@@ -50,7 +50,7 @@ ipython = ">=8.0.0,<9"
 numpy = ">=1.24.1,<2"
 numpy-stl = ">=3.0.0,<4"
 ocpsvg = "*"
-py-lib3mf = "*"
+py-lib3mf = ">=2.3.1"
 svgpathtools = ">=1.5.1,<2"
 trianglesolver = "*"
 typing-extensions = ">=4.6.0,<5"
@@ -218,53 +218,53 @@ draw5 = ["Pillow", "PyMuPDF (>=1.20.0)", "PyQt5", "matplotlib"]

 [[package]]
 name = "fonttools"
-version = "4.49.0"
+version = "4.50.0"
 description = "Tools to manipulate font files"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "fonttools-4.49.0-cp310-cp310-macosx_10_9_universal2.whl", hash = "sha256:d970ecca0aac90d399e458f0b7a8a597e08f95de021f17785fb68e2dc0b99717"},
-    {file = "fonttools-4.49.0-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:ac9a745b7609f489faa65e1dc842168c18530874a5f5b742ac3dd79e26bca8bc"},
-    {file = "fonttools-4.49.0-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:0ba0e00620ca28d4ca11fc700806fd69144b463aa3275e1b36e56c7c09915559"},
-    {file = "fonttools-4.49.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:cdee3ab220283057e7840d5fb768ad4c2ebe65bdba6f75d5d7bf47f4e0ed7d29"},
-    {file = "fonttools-4.49.0-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:ce7033cb61f2bb65d8849658d3786188afd80f53dad8366a7232654804529532"},
-    {file = "fonttools-4.49.0-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:07bc5ea02bb7bc3aa40a1eb0481ce20e8d9b9642a9536cde0218290dd6085828"},
-    {file = "fonttools-4.49.0-cp310-cp310-win32.whl", hash = "sha256:86eef6aab7fd7c6c8545f3ebd00fd1d6729ca1f63b0cb4d621bccb7d1d1c852b"},
-    {file = "fonttools-4.49.0-cp310-cp310-win_amd64.whl", hash = "sha256:1fac1b7eebfce75ea663e860e7c5b4a8831b858c17acd68263bc156125201abf"},
-    {file = "fonttools-4.49.0-cp311-cp311-macosx_10_9_universal2.whl", hash = "sha256:edc0cce355984bb3c1d1e89d6a661934d39586bb32191ebff98c600f8957c63e"},
-    {file = "fonttools-4.49.0-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:83a0d9336de2cba86d886507dd6e0153df333ac787377325a39a2797ec529814"},
-    {file = "fonttools-4.49.0-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:36c8865bdb5cfeec88f5028e7e592370a0657b676c6f1d84a2108e0564f90e22"},
-    {file = "fonttools-4.49.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:33037d9e56e2562c710c8954d0f20d25b8386b397250d65581e544edc9d6b942"},
-    {file = "fonttools-4.49.0-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:8fb022d799b96df3eaa27263e9eea306bd3d437cc9aa981820850281a02b6c9a"},
-    {file = "fonttools-4.49.0-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:33c584c0ef7dc54f5dd4f84082eabd8d09d1871a3d8ca2986b0c0c98165f8e86"},
-    {file = "fonttools-4.49.0-cp311-cp311-win32.whl", hash = "sha256:cbe61b158deb09cffdd8540dc4a948d6e8f4d5b4f3bf5cd7db09bd6a61fee64e"},
-    {file = "fonttools-4.49.0-cp311-cp311-win_amd64.whl", hash = "sha256:fc11e5114f3f978d0cea7e9853627935b30d451742eeb4239a81a677bdee6bf6"},
-    {file = "fonttools-4.49.0-cp312-cp312-macosx_10_9_universal2.whl", hash = "sha256:d647a0e697e5daa98c87993726da8281c7233d9d4ffe410812a4896c7c57c075"},
-    {file = "fonttools-4.49.0-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:f3bbe672df03563d1f3a691ae531f2e31f84061724c319652039e5a70927167e"},
-    {file = "fonttools-4.49.0-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:bebd91041dda0d511b0d303180ed36e31f4f54b106b1259b69fade68413aa7ff"},
-    {file = "fonttools-4.49.0-cp312-cp312-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:4145f91531fd43c50f9eb893faa08399816bb0b13c425667c48475c9f3a2b9b5"},
-    {file = "fonttools-4.49.0-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:ea329dafb9670ffbdf4dbc3b0e5c264104abcd8441d56de77f06967f032943cb"},
-    {file = "fonttools-4.49.0-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:c076a9e548521ecc13d944b1d261ff3d7825048c338722a4bd126d22316087b7"},
-    {file = "fonttools-4.49.0-cp312-cp312-win32.whl", hash = "sha256:b607ea1e96768d13be26d2b400d10d3ebd1456343eb5eaddd2f47d1c4bd00880"},
-    {file = "fonttools-4.49.0-cp312-cp312-win_amd64.whl", hash = "sha256:a974c49a981e187381b9cc2c07c6b902d0079b88ff01aed34695ec5360767034"},
-    {file = "fonttools-4.49.0-cp38-cp38-macosx_10_9_universal2.whl", hash = "sha256:b85ec0bdd7bdaa5c1946398cbb541e90a6dfc51df76dfa88e0aaa41b335940cb"},
-    {file = "fonttools-4.49.0-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:af20acbe198a8a790618ee42db192eb128afcdcc4e96d99993aca0b60d1faeb4"},
-    {file = "fonttools-4.49.0-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4d418b1fee41a1d14931f7ab4b92dc0bc323b490e41d7a333eec82c9f1780c75"},
-    {file = "fonttools-4.49.0-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:b44a52b8e6244b6548851b03b2b377a9702b88ddc21dcaf56a15a0393d425cb9"},
-    {file = "fonttools-4.49.0-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:7c7125068e04a70739dad11857a4d47626f2b0bd54de39e8622e89701836eabd"},
-    {file = "fonttools-4.49.0-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:29e89d0e1a7f18bc30f197cfadcbef5a13d99806447c7e245f5667579a808036"},
-    {file = "fonttools-4.49.0-cp38-cp38-win32.whl", hash = "sha256:9d95fa0d22bf4f12d2fb7b07a46070cdfc19ef5a7b1c98bc172bfab5bf0d6844"},
-    {file = "fonttools-4.49.0-cp38-cp38-win_amd64.whl", hash = "sha256:768947008b4dc552d02772e5ebd49e71430a466e2373008ce905f953afea755a"},
-    {file = "fonttools-4.49.0-cp39-cp39-macosx_10_9_universal2.whl", hash = "sha256:08877e355d3dde1c11973bb58d4acad1981e6d1140711230a4bfb40b2b937ccc"},
-    {file = "fonttools-4.49.0-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:fdb54b076f25d6b0f0298dc706acee5052de20c83530fa165b60d1f2e9cbe3cb"},
-    {file = "fonttools-4.49.0-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:0af65c720520710cc01c293f9c70bd69684365c6015cc3671db2b7d807fe51f2"},
-    {file = "fonttools-4.49.0-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:1f255ce8ed7556658f6d23f6afd22a6d9bbc3edb9b96c96682124dc487e1bf42"},
-    {file = "fonttools-4.49.0-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:d00af0884c0e65f60dfaf9340e26658836b935052fdd0439952ae42e44fdd2be"},
-    {file = "fonttools-4.49.0-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:263832fae27481d48dfafcc43174644b6706639661e242902ceb30553557e16c"},
-    {file = "fonttools-4.49.0-cp39-cp39-win32.whl", hash = "sha256:0404faea044577a01bb82d47a8fa4bc7a54067fa7e324785dd65d200d6dd1133"},
-    {file = "fonttools-4.49.0-cp39-cp39-win_amd64.whl", hash = "sha256:b050d362df50fc6e38ae3954d8c29bf2da52be384649ee8245fdb5186b620836"},
-    {file = "fonttools-4.49.0-py3-none-any.whl", hash = "sha256:af281525e5dd7fa0b39fb1667b8d5ca0e2a9079967e14c4bfe90fd1cd13e0f18"},
-    {file = "fonttools-4.49.0.tar.gz", hash = "sha256:ebf46e7f01b7af7861310417d7c49591a85d99146fc23a5ba82fdb28af156321"},
+    {file = "fonttools-4.50.0-cp310-cp310-macosx_10_9_universal2.whl", hash = "sha256:effd303fb422f8ce06543a36ca69148471144c534cc25f30e5be752bc4f46736"},
+    {file = "fonttools-4.50.0-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:7913992ab836f621d06aabac118fc258b9947a775a607e1a737eb3a91c360335"},
+    {file = "fonttools-4.50.0-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:8e0a1c5bd2f63da4043b63888534b52c5a1fd7ae187c8ffc64cbb7ae475b9dab"},
+    {file = "fonttools-4.50.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:d40fc98540fa5360e7ecf2c56ddf3c6e7dd04929543618fd7b5cc76e66390562"},
+    {file = "fonttools-4.50.0-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:9fff65fbb7afe137bac3113827855e0204482727bddd00a806034ab0d3951d0d"},
+    {file = "fonttools-4.50.0-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:b1aeae3dd2ee719074a9372c89ad94f7c581903306d76befdaca2a559f802472"},
+    {file = "fonttools-4.50.0-cp310-cp310-win32.whl", hash = "sha256:e9623afa319405da33b43c85cceb0585a6f5d3a1d7c604daf4f7e1dd55c03d1f"},
+    {file = "fonttools-4.50.0-cp310-cp310-win_amd64.whl", hash = "sha256:778c5f43e7e654ef7fe0605e80894930bc3a7772e2f496238e57218610140f54"},
+    {file = "fonttools-4.50.0-cp311-cp311-macosx_10_9_universal2.whl", hash = "sha256:3dfb102e7f63b78c832e4539969167ffcc0375b013080e6472350965a5fe8048"},
+    {file = "fonttools-4.50.0-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:9e58fe34cb379ba3d01d5d319d67dd3ce7ca9a47ad044ea2b22635cd2d1247fc"},
+    {file = "fonttools-4.50.0-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:2c673ab40d15a442a4e6eb09bf007c1dda47c84ac1e2eecbdf359adacb799c24"},
+    {file = "fonttools-4.50.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9b3ac35cdcd1a4c90c23a5200212c1bb74fa05833cc7c14291d7043a52ca2aaa"},
+    {file = "fonttools-4.50.0-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:8844e7a2c5f7ecf977e82eb6b3014f025c8b454e046d941ece05b768be5847ae"},
+    {file = "fonttools-4.50.0-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:f849bd3c5c2249b49c98eca5aaebb920d2bfd92b3c69e84ca9bddf133e9f83f0"},
+    {file = "fonttools-4.50.0-cp311-cp311-win32.whl", hash = "sha256:39293ff231b36b035575e81c14626dfc14407a20de5262f9596c2cbb199c3625"},
+    {file = "fonttools-4.50.0-cp311-cp311-win_amd64.whl", hash = "sha256:c33d5023523b44d3481624f840c8646656a1def7630ca562f222eb3ead16c438"},
+    {file = "fonttools-4.50.0-cp312-cp312-macosx_10_9_universal2.whl", hash = "sha256:b4a886a6dbe60100ba1cd24de962f8cd18139bd32808da80de1fa9f9f27bf1dc"},
+    {file = "fonttools-4.50.0-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:b2ca1837bfbe5eafa11313dbc7edada79052709a1fffa10cea691210af4aa1fa"},
+    {file = "fonttools-4.50.0-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:a0493dd97ac8977e48ffc1476b932b37c847cbb87fd68673dee5182004906828"},
+    {file = "fonttools-4.50.0-cp312-cp312-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:77844e2f1b0889120b6c222fc49b2b75c3d88b930615e98893b899b9352a27ea"},
+    {file = "fonttools-4.50.0-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:3566bfb8c55ed9100afe1ba6f0f12265cd63a1387b9661eb6031a1578a28bad1"},
+    {file = "fonttools-4.50.0-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:35e10ddbc129cf61775d58a14f2d44121178d89874d32cae1eac722e687d9019"},
+    {file = "fonttools-4.50.0-cp312-cp312-win32.whl", hash = "sha256:cc8140baf9fa8f9b903f2b393a6c413a220fa990264b215bf48484f3d0bf8710"},
+    {file = "fonttools-4.50.0-cp312-cp312-win_amd64.whl", hash = "sha256:0ccc85fd96373ab73c59833b824d7a73846670a0cb1f3afbaee2b2c426a8f931"},
+    {file = "fonttools-4.50.0-cp38-cp38-macosx_10_9_universal2.whl", hash = "sha256:e270a406219af37581d96c810172001ec536e29e5593aa40d4c01cca3e145aa6"},
+    {file = "fonttools-4.50.0-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:ac2463de667233372e9e1c7e9de3d914b708437ef52a3199fdbf5a60184f190c"},
+    {file = "fonttools-4.50.0-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:47abd6669195abe87c22750dbcd366dc3a0648f1b7c93c2baa97429c4dc1506e"},
+    {file = "fonttools-4.50.0-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:074841375e2e3d559aecc86e1224caf78e8b8417bb391e7d2506412538f21adc"},
+    {file = "fonttools-4.50.0-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:0743fd2191ad7ab43d78cd747215b12033ddee24fa1e088605a3efe80d6984de"},
+    {file = "fonttools-4.50.0-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:3d7080cce7be5ed65bee3496f09f79a82865a514863197ff4d4d177389e981b0"},
+    {file = "fonttools-4.50.0-cp38-cp38-win32.whl", hash = "sha256:a467ba4e2eadc1d5cc1a11d355abb945f680473fbe30d15617e104c81f483045"},
+    {file = "fonttools-4.50.0-cp38-cp38-win_amd64.whl", hash = "sha256:f77e048f805e00870659d6318fd89ef28ca4ee16a22b4c5e1905b735495fc422"},
+    {file = "fonttools-4.50.0-cp39-cp39-macosx_10_9_universal2.whl", hash = "sha256:b6245eafd553c4e9a0708e93be51392bd2288c773523892fbd616d33fd2fda59"},
+    {file = "fonttools-4.50.0-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:a4062cc7e8de26f1603323ef3ae2171c9d29c8a9f5e067d555a2813cd5c7a7e0"},
+    {file = "fonttools-4.50.0-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:34692850dfd64ba06af61e5791a441f664cb7d21e7b544e8f385718430e8f8e4"},
+    {file = "fonttools-4.50.0-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:678dd95f26a67e02c50dcb5bf250f95231d455642afbc65a3b0bcdacd4e4dd38"},
+    {file = "fonttools-4.50.0-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:4f2ce7b0b295fe64ac0a85aef46a0f2614995774bd7bc643b85679c0283287f9"},
+    {file = "fonttools-4.50.0-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:d346f4dc2221bfb7ab652d1e37d327578434ce559baf7113b0f55768437fe6a0"},
+    {file = "fonttools-4.50.0-cp39-cp39-win32.whl", hash = "sha256:a51eeaf52ba3afd70bf489be20e52fdfafe6c03d652b02477c6ce23c995222f4"},
+    {file = "fonttools-4.50.0-cp39-cp39-win_amd64.whl", hash = "sha256:8639be40d583e5d9da67795aa3eeeda0488fb577a1d42ae11a5036f18fb16d93"},
+    {file = "fonttools-4.50.0-py3-none-any.whl", hash = "sha256:48fa36da06247aa8282766cfd63efff1bb24e55f020f29a335939ed3844d20d3"},
+    {file = "fonttools-4.50.0.tar.gz", hash = "sha256:fa5cf61058c7dbb104c2ac4e782bf1b2016a8cf2f69de6e4dd6a865d2c969bb5"},
 ]

 [package.extras]
@@ -339,13 +339,13 @@ testing = ["Django", "attrs", "colorama", "docopt", "pytest (<7.0.0)"]

 [[package]]
 name = "marshmallow"
-version = "3.21.0"
+version = "3.21.1"
 description = "A lightweight library for converting complex datatypes to and from native Python datatypes."
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "marshmallow-3.21.0-py3-none-any.whl", hash = "sha256:e7997f83571c7fd476042c2c188e4ee8a78900ca5e74bd9c8097afa56624e9bd"},
-    {file = "marshmallow-3.21.0.tar.gz", hash = "sha256:20f53be28c6e374a711a16165fb22a8dc6003e3f7cda1285e3ca777b9193885b"},
+    {file = "marshmallow-3.21.1-py3-none-any.whl", hash = "sha256:f085493f79efb0644f270a9bf2892843142d80d7174bbbd2f3713f2a589dc633"},
+    {file = "marshmallow-3.21.1.tar.gz", hash = "sha256:4e65e9e0d80fc9e609574b9983cf32579f305c718afb30d7233ab818571768c3"},
 ]

 [package.dependencies]
@@ -462,13 +462,13 @@ dev = ["pytest"]

 [[package]]
 name = "packaging"
-version = "23.2"
+version = "24.0"
 description = "Core utilities for Python packages"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "packaging-23.2-py3-none-any.whl", hash = "sha256:8c491190033a9af7e1d931d0b5dacc2ef47509b34dd0de67ed209b5203fc88c7"},
-    {file = "packaging-23.2.tar.gz", hash = "sha256:048fb0e9405036518eaaf48a55953c750c11e1a1b68e0dd1a9d62ed0c092cfc5"},
+    {file = "packaging-24.0-py3-none-any.whl", hash = "sha256:2ddfb553fdf02fb784c234c7ba6ccc288296ceabec964ad2eae3777778130bc5"},
+    {file = "packaging-24.0.tar.gz", hash = "sha256:eb82c5e3e56209074766e6885bb04b8c38a0c015d0a30036ebe7ece34c9989e9"},
 ]

 [[package]]
@@ -626,12 +626,12 @@ tests = ["pytest"]

 [[package]]
 name = "py-lib3mf"
-version = "2.2.0"
+version = "2.3.1"
 description = "A python package for Lib3MF tools"
 optional = false
 python-versions = ">=3.9"
 files = [
-    {file = "py_lib3mf-2.2.0-py3-none-any.whl", hash = "sha256:d6d3c4e3d2f65d164b810c7c4d167cea3a75b7b68efd74e07d6f63fa6d527fa1"},
+    {file = "py_lib3mf-2.3.1-py3-none-any.whl", hash = "sha256:86a870ef386debba9b74683d3a08125a34c153aaa65e967f61677cc5a0a65e24"},
 ]

 [[package]]
@@ -665,13 +665,13 @@ windows-terminal = ["colorama (>=0.4.6)"]

 [[package]]
 name = "pyparsing"
-version = "3.1.1"
+version = "3.1.2"
 description = "pyparsing module - Classes and methods to define and execute parsing grammars"
 optional = false
 python-versions = ">=3.6.8"
 files = [
-    {file = "pyparsing-3.1.1-py3-none-any.whl", hash = "sha256:32c7c0b711493c72ff18a981d24f28aaf9c1fb7ed5e9667c9e84e3db623bdbfb"},
-    {file = "pyparsing-3.1.1.tar.gz", hash = "sha256:ede28a1a32462f5a9705e07aea48001a08f7cf81a021585011deba701581a0db"},
+    {file = "pyparsing-3.1.2-py3-none-any.whl", hash = "sha256:f9db75911801ed778fe61bb643079ff86601aca99fcae6345aa67292038fb742"},
+    {file = "pyparsing-3.1.2.tar.gz", hash = "sha256:a1bac0ce561155ecc3ed78ca94d3c9378656ad4c94c1270de543f621420f94ad"},
 ]

 [package.extras]
@@ -808,18 +808,18 @@ files = [

 [[package]]
 name = "traitlets"
-version = "5.14.1"
+version = "5.14.2"
 description = "Traitlets Python configuration system"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "traitlets-5.14.1-py3-none-any.whl", hash = "sha256:2e5a030e6eff91737c643231bfcf04a65b0132078dad75e4936700b213652e74"},
-    {file = "traitlets-5.14.1.tar.gz", hash = "sha256:8585105b371a04b8316a43d5ce29c098575c2e477850b62b848b964f1444527e"},
+    {file = "traitlets-5.14.2-py3-none-any.whl", hash = "sha256:fcdf85684a772ddeba87db2f398ce00b40ff550d1528c03c14dbf6a02003cd80"},
+    {file = "traitlets-5.14.2.tar.gz", hash = "sha256:8cdd83c040dab7d1dee822678e5f5d100b514f7b72b01615b26fc5718916fdf9"},
 ]

 [package.extras]
 docs = ["myst-parser", "pydata-sphinx-theme", "sphinx"]
-test = ["argcomplete (>=3.0.3)", "mypy (>=1.7.0)", "pre-commit", "pytest (>=7.0,<7.5)", "pytest-mock", "pytest-mypy-testing"]
+test = ["argcomplete (>=3.0.3)", "mypy (>=1.7.0)", "pre-commit", "pytest (>=7.0,<8.1)", "pytest-mock", "pytest-mypy-testing"]

 [[package]]
 name = "trianglesolver"
@@ -951,4 +951,4 @@ files = [
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.9"
-content-hash = "567ef9c980c250ace7e380098b810250a36b92dd2e824b5b4f4851898a675e09"
+content-hash = "612c2f4fcc3ff9e37bc9e604bf092452138843ec4dc529dadc210887f0e728fd"
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "yacv-server"
-version = "0.7.0"
+version = "0.8.8"
 description = "Yet Another CAD Viewer (server)"
 authors = ["Yeicor <4929005+Yeicor@users.noreply.github.com>"]
 license = "MIT"
@@ -14,7 +14,7 @@ include = [
 python = "^3.9"

 # CAD
-build123d = "^0.4.0"
+build123d = "^0.5.0"

 # Misc
 pygltflib = "^1.16.2"
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -26,9 +26,10 @@ export default defineConfig({
        }
    },
    build: {
-        assetsDir: '.',
+        assetsDir: '.', // Support deploying to a subdirectory using relative URLs
        cssCodeSplit: false, // Small enough to inline
-        chunkSizeWarningLimit: 550, // Three.js is huge
+        chunkSizeWarningLimit: 550, // Three.js is big. Draco is even bigger but not likely to be used.
+        sourcemap: true, // For debugging production
    },
    define: {
        __APP_NAME__: JSON.stringify(name),
--- a/yacv_server/cad.py
+++ b/yacv_server/cad.py
@@ -2,10 +2,15 @@
 Utilities to work with CAD objects
 """
 import hashlib
-from typing import Optional, Union, List, Tuple
+import io
+import re
+from typing import Optional, Union, Tuple

+from OCP.TopExp import TopExp
 from OCP.TopLoc import TopLoc_Location
+from OCP.TopTools import TopTools_IndexedMapOfShape
 from OCP.TopoDS import TopoDS_Shape
+from build123d import Compound, Shape

 from yacv_server.gltf import GLTFMgr

@@ -40,22 +45,42 @@ def get_shape(obj: CADLike, error: bool = True) -> Optional[CADCoreLike]:
    if isinstance(obj, TopoDS_Shape):
        return obj

+    # Handle iterables like Build123d ShapeList by extracting all sub-shapes and making a compound
+    if isinstance(obj, list) or isinstance(obj, tuple) or isinstance(obj, set) or isinstance(obj, dict):
+        try:
+            if isinstance(obj, dict):
+                obj_iter = iter(obj.values())
+            else:
+                obj_iter = iter(obj)
+            # print(obj, ' -> ', obj_iter)
+            shapes_raw = [get_shape(sub_obj, error=False) for sub_obj in obj_iter]
+            # Silently drop non-shapes
+            shapes_raw_filtered = [shape for shape in shapes_raw if shape is not None]
+            if len(shapes_raw_filtered) > 0:  # Continue if we found at least one shape
+                # Sorting is required to improve hashcode consistency
+                shapes_raw_filtered_sorted = sorted(shapes_raw_filtered, key=lambda x: _hashcode(x))
+                # Build a single compound shape
+                shapes_bd = [Shape(shape) for shape in shapes_raw_filtered_sorted if shape is not None]
+                return get_shape(Compound(shapes_bd), error)
+        except TypeError:
+            pass
+
    if error:
        raise ValueError(f'Cannot show object of type {type(obj)} (submit issue?)')
    else:
        return None


-def grab_all_cad() -> List[Tuple[str, CADCoreLike]]:
+def grab_all_cad() -> set[Tuple[str, CADCoreLike]]:
    """ Grab all shapes by inspecting the stack """
    import inspect
    stack = inspect.stack()
-    shapes = []
+    shapes = set()
    for frame in stack:
        for key, value in frame.frame.f_locals.items():
            shape = get_shape(value, error=False)
-            if shape:
-                shapes.append((key, shape))
+            if shape and shape not in shapes:
+                shapes.add((key, shape))
    return shapes


@@ -91,13 +116,6 @@ def image_to_gltf(source: str | bytes, center: any, width: Optional[float] = Non
    if not isinstance(center_loc, TopLoc_Location):
        raise ValueError('Center location not valid')
    plane = Plane(Location(center_loc))
-    # Convert coordinates system
-    plane.origin = Vector(plane.origin.X, plane.origin.Z, -plane.origin.Y)
-    plane.z_dir = -plane.y_dir
-    plane.y_dir = plane.z_dir
-
-    def vert(v: Vector) -> Tuple[float, float, float]:
-        return v.X, v.Y, v.Z

    # Load the image to a byte buffer
    img = Image.open(source)
@@ -121,13 +139,17 @@ def image_to_gltf(source: str | bytes, center: any, width: Optional[float] = Non
    img.save(img_buf, format=format)
    img_buf = img_buf.getvalue()

+    # Convert coordinates system as a last step (gltf is Y-up instead of Z-up)
+    def vert(v: Vector) -> Vector:
+        return Vector(v.X, v.Z, -v.Y)
+
    # Build the gltf
    mgr = GLTFMgr(image=(img_buf, save_mime))
    mgr.add_face([
-        vert(plane.origin - plane.x_dir * width / 2 - plane.y_dir * height / 2),
-        vert(plane.origin + plane.x_dir * width / 2 - plane.y_dir * height / 2),
-        vert(plane.origin + plane.x_dir * width / 2 + plane.y_dir * height / 2),
        vert(plane.origin - plane.x_dir * width / 2 + plane.y_dir * height / 2),
+        vert(plane.origin + plane.x_dir * width / 2 + plane.y_dir * height / 2),
+        vert(plane.origin + plane.x_dir * width / 2 - plane.y_dir * height / 2),
+        vert(plane.origin - plane.x_dir * width / 2 - plane.y_dir * height / 2),
    ], [
        (0, 2, 1),
        (0, 3, 2),
@@ -140,3 +162,32 @@ def image_to_gltf(source: str | bytes, center: any, width: Optional[float] = Non

    # Return the GLTF binary blob and the suggested name of the image
    return b''.join(mgr.build().save_to_bytes()), name
+
+
+def _hashcode(obj: Union[bytes, CADCoreLike], **extras) -> str:
+    """Utility to compute the STABLE hash code of a shape"""
+    # NOTE: obj.HashCode(MAX_HASH_CODE) is not stable across different runs of the same program
+    # This is best-effort and not guaranteed to be unique
+    hasher = hashlib.md5(usedforsecurity=False)
+    for k, v in extras.items():
+        hasher.update(str(k).encode())
+        hasher.update(str(v).encode())
+    if isinstance(obj, bytes):
+        hasher.update(obj)
+    elif isinstance(obj, TopLoc_Location):
+        sub_data = io.BytesIO()
+        obj.DumpJson(sub_data)
+        hasher.update(sub_data.getvalue())
+    elif isinstance(obj, TopoDS_Shape):
+        map_of_shapes = TopTools_IndexedMapOfShape()
+        TopExp.MapShapes_s(obj, map_of_shapes)
+        for i in range(1, map_of_shapes.Extent() + 1):
+            sub_shape = map_of_shapes.FindKey(i)
+            sub_data = io.BytesIO()
+            TopoDS_Shape.DumpJson(sub_shape, sub_data)
+            val = sub_data.getvalue()
+            val = re.sub(b'"this": "[^"]*"', b'', val)  # Remove memory address
+            hasher.update(val)
+    else:
+        raise ValueError(f'Cannot hash object of type {type(obj)}')
+    return hasher.hexdigest()
--- a/yacv_server/gltf.py
+++ b/yacv_server/gltf.py
@@ -70,7 +70,7 @@ class GLTFMgr:
    def _vertices_primitive(self) -> Primitive:
        return [p for p in self.gltf.meshes[0].primitives if p.mode == POINTS][0]

-    def add_face(self, vertices_raw: List[Tuple[float, float, float]], indices_raw: List[Tuple[int, int, int]],
+    def add_face(self, vertices_raw: List[Vector], indices_raw: List[Tuple[int, int, int]],
                 tex_coord_raw: List[Tuple[float, float]],
                 color: Tuple[float, float, float, float] = (1.0, 0.75, 0.0, 1.0)):
        """Add a face to the GLTF mesh"""
@@ -85,7 +85,7 @@ class GLTFMgr:
        self._faces_primitive.extras["face_triangles_end"].append(len(self.face_indices))

    def add_edge(self, vertices_raw: List[Tuple[Tuple[float, float, float], Tuple[float, float, float]]],
-                 color: Tuple[float, float, float, float] = (0.1, 0.1, 0.4, 1.0)):
+                 color: Tuple[float, float, float, float] = (0.1, 0.1, 1.0, 1.0)):
        """Add an edge to the GLTF mesh"""
        vertices_flat = [v for t in vertices_raw for v in t]  # Line from 0 to 1, 2 to 3, 4 to 5, etc.
        base_index = len(self.edge_positions) // 3
@@ -95,7 +95,7 @@ class GLTFMgr:
        self._edges_primitive.extras["edge_points_end"].append(len(self.edge_indices))

    def add_vertex(self, vertex: Tuple[float, float, float],
-                   color: Tuple[float, float, float, float] = (0.1, 0.4, 0.1, 1.0)):
+                   color: Tuple[float, float, float, float] = (0.1, 0.1, 0.1, 1.0)):
        """Add a vertex to the GLTF mesh"""
        base_index = len(self.vertex_positions) // 3
        self.vertex_indices.append(base_index)
--- a/yacv_server/logo.py
+++ b/yacv_server/logo.py
@@ -19,9 +19,8 @@ def build_logo(text: bool = True) -> Dict[str, Union[Part, Location, str]]:
                Text('Yet Another\nCAD Viewer', 7, font_path='/usr/share/fonts/TTF/OpenSans-Regular.ttf')
            extrude(amount=1)

-    logo_img_location = logo_obj.faces().group_by(Axis.X)[0].face().center_location  # Avoid overlapping:
-    logo_img_location.position = Vector(logo_img_location.position.X - 4e-2, logo_img_location.position.Y,
-                                        logo_img_location.position.Z)
+    logo_img_location = logo_obj.faces().group_by(Axis.X)[0].face().center_location
+    logo_img_location *= Location((0, 0, 4e-2), (0, 0, 90))  # Avoid overlapping and adjust placement

    logo_img_path = os.path.join(ASSETS_DIR, 'img.jpg')
    img_glb_bytes, img_name = image_to_gltf(logo_img_path, logo_img_location, height=18)
--- a/yacv_server/tessellate.py
+++ b/yacv_server/tessellate.py
@@ -1,14 +1,9 @@
-import hashlib
-import io
-import re
-from typing import List, Dict, Tuple, Union
+from typing import List, Dict, Tuple

 from OCP.BRep import BRep_Tool
 from OCP.BRepAdaptor import BRepAdaptor_Curve
 from OCP.GCPnts import GCPnts_TangentialDeflection
-from OCP.TopExp import TopExp
 from OCP.TopLoc import TopLoc_Location
-from OCP.TopTools import TopTools_IndexedMapOfShape
 from OCP.TopoDS import TopoDS_Face, TopoDS_Edge, TopoDS_Shape, TopoDS_Vertex
 from build123d import Shape, Vertex, Face, Location
 from pygltflib import GLTF2
@@ -43,17 +38,17 @@ def tessellate(
                _tessellate_face(mgr, face.wrapped, tolerance, angular_tolerance)
                if edges:
                    for edge in face.edges():
-                        edge_to_faces[_hashcode(edge.wrapped)] = edge_to_faces.get(_hashcode(edge.wrapped), []) + [face.wrapped]
+                        edge_to_faces[edge.wrapped] = edge_to_faces.get(edge.wrapped, []) + [face.wrapped]
                if vertices:
                    for vertex in face.vertices():
-                        vertex_to_faces[_hashcode(vertex.wrapped)] = vertex_to_faces.get(_hashcode(vertex.wrapped), []) + [face.wrapped]
+                        vertex_to_faces[vertex.wrapped] = vertex_to_faces.get(vertex.wrapped, []) + [face.wrapped]
        if edges:
            for edge in shape.edges():
-                _tessellate_edge(mgr, edge.wrapped, edge_to_faces.get(_hashcode(edge.wrapped), []), angular_tolerance,
+                _tessellate_edge(mgr, edge.wrapped, edge_to_faces.get(edge.wrapped, []), angular_tolerance,
                                 angular_tolerance)
        if vertices:
            for vertex in shape.vertices():
-                _tessellate_vertex(mgr, vertex.wrapped, vertex_to_faces.get(_hashcode(vertex.wrapped), []))
+                _tessellate_vertex(mgr, vertex.wrapped, vertex_to_faces.get(vertex.wrapped, []))

    return mgr.build()

@@ -65,12 +60,12 @@ def _tessellate_face(
        angular_tolerance: float = 0.1
 ):
    face = Shape(ocp_face)
-    face.mesh(tolerance, angular_tolerance)
+    # face.mesh(tolerance, angular_tolerance)
+    tri_mesh = face.tessellate(tolerance, angular_tolerance)
    poly = BRep_Tool.Triangulation_s(face.wrapped, TopLoc_Location())
    if poly is None:
        logger.warn("No triangulation found for face")
        return GLTF2()
-    tri_mesh = face.tessellate(tolerance, angular_tolerance)

    # Get UV of each face from the parameters
    uv = [
@@ -78,7 +73,7 @@ def _tessellate_face(
        for v in (poly.UVNode(i) for i in range(1, poly.NbNodes() + 1))
    ]

-    vertices = [(v.X, v.Y, v.Z) for v in tri_mesh[0]]
+    vertices = tri_mesh[0]
    indices = tri_mesh[1]
    mgr.add_face(vertices, indices, uv)

@@ -130,30 +125,3 @@ def _tessellate_vertex(mgr: GLTFMgr, ocp_vertex: TopoDS_Vertex, faces: List[Topo
    mgr.add_vertex(_push_point((c.X, c.Y, c.Z), faces))


-def _hashcode(obj: Union[bytes, TopoDS_Shape], **extras) -> str:
-    """Utility to compute the hash code of a shape recursively without the need to tessellate it"""
-    # NOTE: obj.HashCode(MAX_HASH_CODE) is not stable across different runs of the same program
-    # This is best-effort and not guaranteed to be unique
-    hasher = hashlib.md5(usedforsecurity=False)
-    for k, v in extras.items():
-        hasher.update(str(k).encode())
-        hasher.update(str(v).encode())
-    if isinstance(obj, bytes):
-        hasher.update(obj)
-    elif isinstance(obj, TopLoc_Location):
-        sub_data = io.BytesIO()
-        obj.DumpJson(sub_data)
-        hasher.update(sub_data.getvalue())
-    elif isinstance(obj, TopoDS_Shape):
-        map_of_shapes = TopTools_IndexedMapOfShape()
-        TopExp.MapShapes_s(obj, map_of_shapes)
-        for i in range(1, map_of_shapes.Extent() + 1):
-            sub_shape = map_of_shapes.FindKey(i)
-            sub_data = io.BytesIO()
-            TopoDS_Shape.DumpJson(sub_shape, sub_data)
-            val = sub_data.getvalue()
-            val = re.sub(b'"this": "[^"]*"', b'', val)  # Remove memory address
-            hasher.update(val)
-    else:
-        raise ValueError(f'Cannot hash object of type {type(obj)}')
-    return hasher.hexdigest()
--- a/yacv_server/yacv.py
+++ b/yacv_server/yacv.py
@@ -18,12 +18,13 @@ from OCP.TopoDS import TopoDS_Shape
 from build123d import Shape, Axis, Location, Vector
 from dataclasses_json import dataclass_json

-from yacv_server.rwlock import RWLock
 from yacv_server.cad import get_shape, grab_all_cad, CADCoreLike, CADLike
 from yacv_server.myhttp import HTTPHandler
 from yacv_server.mylogger import logger
 from yacv_server.pubsub import BufferedPubSub
-from yacv_server.tessellate import _hashcode, tessellate
+from yacv_server.rwlock import RWLock
+from yacv_server.tessellate import tessellate
+from yacv_server.cad import _hashcode


@dataclass_json
@@ -194,7 +195,7 @@ class YACV:

    def show_cad_all(self, **kwargs):
        """Publishes all CAD objects in the current scope to the server"""
-        all_cad = grab_all_cad()
+        all_cad = list(grab_all_cad())  # List for reproducible iteration order
        self.show(*[cad for _, cad in all_cad], names=[name for name, _ in all_cad], **kwargs)

    def remove(self, name: str):
@@ -278,9 +279,10 @@ class YACV:
                                      edges=event.kwargs.get('edges', True),
                                      vertices=event.kwargs.get('vertices', True))
                    glb_list_of_bytes = gltf.save_to_bytes()
-                    publish_to.publish(b''.join(glb_list_of_bytes))
-                    logger.info('export(%s) took %.3f seconds, %d parts', name, time.time() - start,
-                                len(gltf.meshes[0].primitives))
+                    glb_bytes = b''.join(glb_list_of_bytes)
+                    publish_to.publish(glb_bytes)
+                    logger.info('export(%s) took %.3f seconds, %s', name, time.time() - start,
+                                sizeof_fmt(len(glb_bytes)))

            # In either case return the elements of a subscription to the async generator
            subscription = self.build_events[name].subscribe()
@@ -324,9 +326,18 @@ _find_var_name_count = 0
 def _find_var_name(obj: any, avoid_levels: int = 2) -> str:
    """A hacky way to get a stable name for an object that may change over time"""
    global _find_var_name_count
+    obj_shape = get_shape(obj, error=False) or obj
    for frame in inspect.stack()[avoid_levels:]:
        for key, value in frame.frame.f_locals.items():
-            if value is obj:
+            if get_shape(value, error=False) is obj_shape:
                return key
    _find_var_name_count += 1
    return 'unknown_var_' + str(_find_var_name_count)
+
+
+def sizeof_fmt(num, suffix="B"):
+    for unit in ("", "Ki", "Mi", "Gi", "Ti", "Pi", "Ei", "Zi"):
+        if abs(num) < 1024.0:
+            return f"{num:3.1f}{unit}{suffix}"
+        num /= 1024.0
+    return f"{num:.1f}Yi{suffix}"
--- a/yarn.lock
+++ b/yarn.lock
@@ -390,7 +390,7 @@
  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz#9c907b21e30a52db959ba4f80bb01a0cc403d5cc"
  integrity sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==

-"@gltf-transform/core@^3.10.0", "@gltf-transform/core@^3.10.1":
+"@gltf-transform/core@^3.10.1":
  version "3.10.1"
  resolved "https://registry.yarnpkg.com/@gltf-transform/core/-/core-3.10.1.tgz#d99c060b499482ed2c3304466405bf4c10939831"
  integrity sha512-50OYemknGNxjBmiOM6iJp04JAu0bl9jvXJfN/gFt9QdJO02cPDcoXlTfSPJG6TVWDcfl0xPlsx1vybcbPVGFcQ==
@@ -777,10 +777,10 @@
    "@sigstore/core" "^1.0.0"
    "@sigstore/protobuf-specs" "^0.3.0"

-"@tsconfig/node20@^20.1.3":
-  version "20.1.3"
-  resolved "https://registry.yarnpkg.com/@tsconfig/node20/-/node20-20.1.3.tgz#b3b4cf785e1b390a6ab48a68aa594a25960d2fe8"
-  integrity sha512-XeWn6Gms5MaQWdj+C4fuxuo/Icy8ckh+BwAIijhX2LKRHHt1OuctLLLlB0F4EPi55m2IUJNTnv8FH9kSBI7Ogw==
+"@tsconfig/node20@^20.1.4":
+  version "20.1.4"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node20/-/node20-20.1.4.tgz#3457d42eddf12d3bde3976186ab0cd22b85df928"
+  integrity sha512-sqgsT69YFeLWf5NtJ4Xq/xAF8p4ZQHlmGW74Nu2tD4+g5fAsposc4ZfaaPixVu4y01BEiDCWLRDCvDM5JOsRxg==

 "@tufjs/canonical-json@2.0.0":
  version "2.0.0"
@@ -795,11 +795,6 @@
    "@tufjs/canonical-json" "2.0.0"
    minimatch "^9.0.3"

-"@tweenjs/tween.js@~23.1.1":
-  version "23.1.1"
-  resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-23.1.1.tgz#0ae28ed9c635805557f78c2626464018d5f1b5e2"
-  integrity sha512-ZpboH7pCPPeyBWKf8c7TJswtCEQObFo3bOBYalm99NzZarATALYCo5OhbCa/n4RQyJyHfhkdx+hNrdL5ByFYDw==
-
 "@types/estree@1.0.5":
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@@ -810,10 +805,10 @@
  resolved "https://registry.yarnpkg.com/@types/ndarray/-/ndarray-1.0.14.tgz#96b28c09a3587a76de380243f87bb7a2d63b4b23"
  integrity sha512-oANmFZMnFQvb219SSBIhI1Ih/r4CvHDOzkWyJS/XRqkMrGH5/kaPSA1hQhdIBzouaE+5KpE/f5ylI9cujmckQg==

-"@types/node@^20.11.30":
-  version "20.11.30"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.30.tgz#9c33467fc23167a347e73834f788f4b9f399d66f"
-  integrity sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==
+"@types/node@^20.12.2":
+  version "20.12.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.2.tgz#9facdd11102f38b21b4ebedd9d7999663343d72e"
+  integrity sha512-zQ0NYO87hyN6Xrclcqp7f8ZbXNbRfoGWNcMvHTPQp9UUrwI0mI7XBz+cu7/W6/VClYo2g63B0cjull/srU7LgQ==
  dependencies:
    undici-types "~5.26.4"

@@ -822,12 +817,11 @@
  resolved "https://registry.yarnpkg.com/@types/stats.js/-/stats.js-0.17.3.tgz#705446e12ce0fad618557dd88236f51148b7a935"
  integrity sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==

-"@types/three@^0.162.0":
-  version "0.162.0"
-  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.162.0.tgz#79d170c88f14b2eaee6b76af00fc4016a533e586"
-  integrity sha512-0j5yZcVukVIhrhSIC7+LmBPkkMoMuEJ1AfYBZfgNytdYqYREMuiyXWhYOMeZLBElTEAlJIZn7r2W3vqTIgjWlg==
+"@types/three@^0.160.0":
+  version "0.160.0"
+  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.160.0.tgz#7915a97e0a14ccaa9ccbb9f190c5730b04a23075"
+  integrity sha512-jWlbUBovicUKaOYxzgkLlhkiEQJkhCVvg4W2IYD2trqD2om3VK4DGLpHH5zQHNr7RweZK/5re/4IVhbhvxbV9w==
  dependencies:
-    "@tweenjs/tween.js" "~23.1.1"
    "@types/stats.js" "*"
    "@types/webxr" "*"
    fflate "~0.6.10"
@@ -2416,7 +2410,7 @@ postcss-selector-parser@^6.0.10:
    cssesc "^3.0.0"
    util-deprecate "^1.0.2"

-postcss@^8.4.35, postcss@^8.4.36:
+postcss@^8.4.35, postcss@^8.4.38:
  version "8.4.38"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
  integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
@@ -2889,10 +2883,10 @@ tar@^6.1.11, tar@^6.1.2:
    mkdirp "^1.0.3"
    yallist "^4.0.0"

-terser@^5.29.2:
-  version "5.29.2"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.29.2.tgz#c17d573ce1da1b30f21a877bffd5655dd86fdb35"
-  integrity sha512-ZiGkhUBIM+7LwkNjXYJq8svgkd+QK3UUr0wJqY4MieaezBSAIPgbSPZyIx0idM6XWK5CMzSWa8MJIzmRcB8Caw==
+terser@^5.30.0:
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.30.0.tgz#64cb2af71e16ea3d32153f84d990f9be0cdc22bf"
+  integrity sha512-Y/SblUl5kEyEFzhMAQdsxVHh+utAxd4IuRNJzKywY/4uzSogh3G219jqbDDxYu4MXO9CzY3tSEqmZvW6AoEDJw==
  dependencies:
    "@jridgewell/source-map" "^0.3.3"
    acorn "^8.8.2"
@@ -2915,10 +2909,10 @@ three@^0.125.0:
  resolved "https://registry.yarnpkg.com/three/-/three-0.125.2.tgz#dcba12749a2eb41522e15212b919cd3fbf729b12"
  integrity sha512-7rIRO23jVKWcAPFdW/HREU2NZMGWPBZ4XwEMt0Ak0jwLUKVJhcKM55eCBWyGZq/KiQbeo1IeuAoo/9l2dzhTXA==

-three@^0.162.0:
-  version "0.162.0"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.162.0.tgz#b15a511f1498e0c42d4d00bbb411c7527b06097e"
-  integrity sha512-xfCYj4RnlozReCmUd+XQzj6/5OjDNHBy5nT6rVwrOKGENAvpXe2z1jL+DZYaMu4/9pNsjH/4Os/VvS9IrH7IOQ==
+three@^0.160.1:
+  version "0.160.1"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.160.1.tgz#61fe2907312e8604b1f64187f58e047503847413"
+  integrity sha512-Bgl2wPJypDOZ1stAxwfWAcJ0WQf7QzlptsxkjYiURPz+n5k4RBDLsq+6f9Y75TYxn6aHLcWz+JNmwTOXWrQTBQ==

 to-fast-properties@^2.0.0:
  version "2.0.0"
@@ -3008,13 +3002,13 @@ validate-npm-package-name@^5.0.0:
  dependencies:
    builtins "^5.0.0"

-vite@^5.2.6:
-  version "5.2.6"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.2.6.tgz#fc2ce309e0b4871e938cb0aca3b96c422c01f222"
-  integrity sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==
+vite@^5.2.7:
+  version "5.2.7"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.2.7.tgz#e1b8a985eb54fcb9467d7f7f009d87485016df6e"
+  integrity sha512-k14PWOKLI6pMaSzAuGtT+Cf0YmIx12z9YGon39onaJNy8DLBfBJrzg9FQEmkAM5lpHBZs9wksWAsyF/HkpEwJA==
  dependencies:
    esbuild "^0.20.1"
-    postcss "^8.4.36"
+    postcss "^8.4.38"
    rollup "^4.13.0"
  optionalDependencies:
    fsevents "~2.3.3"
@@ -3047,10 +3041,10 @@ vue@^3.4.21:
    "@vue/server-renderer" "3.4.21"
    "@vue/shared" "3.4.21"

-vuetify@^3.5.11:
-  version "3.5.11"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.5.11.tgz#9e5b628544e736de0b7f236b704539d544588152"
-  integrity sha512-us5I0jyFwIQYG4v41PFmVMkoc/oJddVT4C2RFjJTI99ttigbQ92gsTeG5SB8BPfmfnUS4paR5BedZwk6W3KlJw==
+vuetify@^3.5.13:
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.5.13.tgz#24a45d19ce5dcf71b2653f0bcf3ea91edf1f406c"
+  integrity sha512-3ZyIoHgB2GR87ojIpqNwkkRXlUNTEKh83fjUuQ1hOKdTXzEuZXBgtfUt9kp4WOVnYILGdZKWTJ6gv8nXOa/tZA==

 walk-up-path@^3.0.1:
  version "3.0.1"
Author	SHA1	Message	Date
Yeicor	27f540be23	Automatically update version to 0.8.8	2024-03-31 18:24:32 +00:00
Yeicor	e8c0f683c5	Lots of frontend improvements like keeping camera position on changes, avoid flickering on live updates, smooth gizmo animations, proper ortho camera movement, and enabling move by tap when not selecting.	2024-03-31 20:20:53 +02:00
Yeicor	345636e478	Automatically update version to 0.8.7	2024-03-30 17:02:20 +00:00
Yeicor	9a0fb03526	Merge remote-tracking branch 'origin/master'	2024-03-30 18:00:50 +01:00
Yeicor	2037621afc	Fix frontend style issues	2024-03-30 18:00:37 +01:00
Yeicor	2ba0e18479	Automatically update version to 0.8.6	2024-03-30 16:31:40 +00:00
Yeicor	eca2bbfa7c	Fix python import bug	2024-03-30 17:28:49 +01:00
Yeicor	86180c424e	Keep selected enabled features on model updates instead of resetting them, better list of objects support and recover/disable previous selection on scene reloads.	2024-03-30 17:26:06 +01:00
dependabot[bot]	e42d6be074	Bump @tsconfig/node20 from 20.1.3 to 20.1.4 (#30 ) Bumps [@tsconfig/node20](https://github.com/tsconfig/bases/tree/HEAD/bases) from 20.1.3 to 20.1.4. - [Commits](https://github.com/tsconfig/bases/commits/HEAD/bases) --- updated-dependencies: - dependency-name: "@tsconfig/node20" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-03-30 10:57:52 +00:00
dependabot[bot]	e2d6a3cb00	Bump actions/configure-pages from 4 to 5 in /.github/workflows (#31 ) Bumps [actions/configure-pages](https://github.com/actions/configure-pages) from 4 to 5. - [Release notes](https://github.com/actions/configure-pages/releases) - [Commits](https://github.com/actions/configure-pages/compare/v4...v5) --- updated-dependencies: - dependency-name: actions/configure-pages dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-03-30 09:15:41 +00:00
dependabot[bot]	9e453b7890	Bump vuetify from 3.5.11 to 3.5.13 (#29 ) Bumps [vuetify](https://github.com/vuetifyjs/vuetify/tree/HEAD/packages/vuetify) from 3.5.11 to 3.5.13. - [Release notes](https://github.com/vuetifyjs/vuetify/releases) - [Commits](https://github.com/vuetifyjs/vuetify/commits/v3.5.13/packages/vuetify) --- updated-dependencies: - dependency-name: vuetify dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-03-30 09:14:06 +00:00
dependabot[bot]	0b8faa9e8b	Bump vite from 5.2.6 to 5.2.7 (#28 ) Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 5.2.6 to 5.2.7. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v5.2.7/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-03-30 09:13:56 +00:00
dependabot[bot]	00bc2a15e0	Bump @types/node from 20.11.30 to 20.12.2 (#27 ) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.11.30 to 20.12.2. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-03-30 09:13:29 +00:00
dependabot[bot]	432abcf85c	Bump terser from 5.29.2 to 5.30.0 (#26 ) Bumps [terser](https://github.com/terser/terser) from 5.29.2 to 5.30.0. - [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md) - [Commits](https://github.com/terser/terser/compare/v5.29.2...v5.30.0) --- updated-dependencies: - dependency-name: terser dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-03-30 09:13:17 +00:00
Yeicor	4b6d3f6266	Automatically update version to 0.8.5	2024-03-29 11:26:06 +00:00
Yeicor	255ae72ed2	Count features again after changes to model and support for sending arbitrary lists of shapes as a single model.	2024-03-29 12:23:16 +01:00
Yeicor	77dd9fb43e	Merge remote-tracking branch 'origin/master'	2024-03-28 23:32:28 +01:00
Yeicor	5dc2ae2f8d	Remove debug check	2024-03-28 23:32:20 +01:00
Yeicor	58440723bd	Automatically update version to 0.8.4	2024-03-28 22:29:24 +00:00
Yeicor	bfdd656316	Merge remote-tracking branch 'origin/master'	2024-03-28 23:28:43 +01:00
Yeicor	7408823c02	Debug CI	2024-03-28 23:28:36 +01:00
Yeicor	856ffbc4c5	Reduce logging	2024-03-28 23:26:00 +01:00
Yeicor	d0f8463bbf	Automatically update version to 0.8.3	2024-03-28 22:01:12 +00:00
Yeicor	162d3e22a2	Fix typescript	2024-03-28 22:57:26 +01:00
Yeicor	4b06559ab8	Add a progress bar to the frontend and improve slightly batched updates logic	2024-03-28 22:52:34 +01:00
Yeicor	9afa2e5786	Add support for some gltf extensions and better multi-object updates	2024-03-28 19:12:21 +01:00
Yeicor	7196fb2f32	Automatically update version to 0.8.2	2024-03-28 11:52:24 +00:00
Yeicor	8ec60faa04	Merge remote-tracking branch 'origin/master'	2024-03-28 12:51:34 +01:00
Yeicor	13bbdd5956	Fix automatic _find_var_name	2024-03-28 12:51:26 +01:00
Yeicor	3675d2f447	Automatically update version to 0.8.1	2024-03-28 11:23:32 +00:00
Yeicor	efc7a1d3b6	Merge remote-tracking branch 'origin/master'	2024-03-28 12:21:10 +01:00
Yeicor	7166f9fe3d	Improved image location after build123d update	2024-03-28 12:20:56 +01:00
Yeicor	3405de38e7	Automatically update version to 0.8.0	2024-03-27 19:18:02 +00:00
Yeicor	2bd927f2a8	Updates 2	2024-03-27 20:17:19 +01:00
Yeicor	9718172fdd	Updates	2024-03-27 20:16:49 +01:00
Yeicor	472a7a8309	Merge remote-tracking branch 'origin/master'	2024-03-26 22:02:40 +01:00
Yeicor	7a7627f57e	clean code	2024-03-26 22:02:32 +01:00
Yeicor	064d9aeb35	Automatically update version to 0.7.1	2024-03-26 20:30:21 +00:00
Yeicor	eed0baccac	fix automatic naming of objects	2024-03-26 21:25:28 +01:00
Yeicor	72480d82c8	strong performance optimizations for the backend	2024-03-26 21:22:48 +01:00
Yeicor	3de710c8b5	Merge remote-tracking branch 'origin/master'	2024-03-26 20:43:31 +01:00
Yeicor	8ebf48cb36	configurable edge and vertex widths	2024-03-26 20:43:21 +01:00