Automatically update version to 0.8.9

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>

.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'

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:
 

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

frontend/App.vue

@@ -1,13 +1,13 @@
 <!--suppress SillyAssignmentJS -->
-<script setup lang="ts">
+<script lang="ts" setup>
-import {defineAsyncComponent, provide, type Ref, ref, shallowRef, triggerRef} from "vue";
+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);
+  await onModelUpdateRequest(new NetworkUpdateEvent([new NetworkUpdateEventModel(name, "", null, true)], () => {
-  triggerRef(sceneDocument); // Why not triggered automatically?
+  }));
 }
 
 // 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>

frontend/misc/Loading.vue

@@ -1,5 +1,5 @@
-<script setup lang="ts">
+<script lang="ts" setup>
-import {VContainer, VRow, VCol, VProgressCircular} from "vuetify/lib/components/index.mjs";
+import {VCol, VContainer, VProgressCircular, VRow} from "vuetify/lib/components/index.mjs";
 </script>
 
 <template>

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">
+  <v-btn :class="side" class="open-button" icon @click="opened = !opened">
-    <svg-icon type="mdi" :path="openIcon"/>
+    <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>

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) {

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));

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)!
+    // Axes at (0, 0, 0)
-    buildSimpleGltf(doc, [0, 0, 0], [0], [1, 1, 1, 1], transform, '__helper_axes', WebGL2RenderingContext.POINTS);
+    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);
+    }
 }
 
 /**

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!!!
     }));

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, "at", url, "isRemove", isRemove);
-        // 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);
 
-            // Optimization: try to batch updates automatically for faster rendering
+        // We only care about the latest update per model name
-            if (this.batchTimeout !== null) clearTimeout(this.batchTimeout);
+        this.bufferedUpdates = this.bufferedUpdates.filter(m => m.name !== name);
-            this.batchTimeout = setTimeout(() => {
+
-                this.dispatchEvent(new NetworkUpdateEvent(this.bufferedUpdates, disconnect));
+        // Add the new model to the list of updates and dispatch the early update
-                this.bufferedUpdates = [];
+        let upd = new NetworkUpdateEventModel(name, url, hash, isRemove);
-            }, batchTimeout);
+        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);
     }
 }
 

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
+        try {
-        document = await mergePartial(url, name, document, () => loadNetworkEnd = performance.now());
+            // 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",
+            console.log("Model", name, "loaded in", performance.now() - loadNetworkEnd!, "ms after",
-            loadNetworkEnd! - loadStart, "ms of transferring data (maybe building the object on the server)");
+                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) {
+            if (reloadScene) {
-            // Reload the helpers to fit the new model
+                // Display the final fully loaded model
-            await this.reloadHelpers(sceneUrl, document, reloadScene);
+                let displayStart = performance.now();
-            reloadScene = false;
+                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;

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: '',

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 {Mesh} from "@gltf-transform/core";
-import {inject, ref, type ShallowRef, watch} from "vue";
+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
+// Count the number of faces, edges and vertices
-const enabledFeatures = defineModel<Array<number>>("enabledFeatures", {default: [0, 1, 2]});
+let faceCount = ref(-1);
-const opacity = defineModel<number>("opacity", {default: 1});
+let edgeCount = ref(-1);
-const wireframe = ref(false);
+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
+// Misc properties
-let faceCount = props.meshes
+const enabledFeatures = defineModel<Array<number>>("enabledFeatures", {default: [0, 1, 2]});
-    .flatMap((m) => m.listPrimitives().filter(p => p.getMode() === WebGL2RenderingContext.TRIANGLES))
+const opacity = defineModel<number>("opacity", {default: 1});
-    .map(p => (p.getExtras()?.face_triangles_end as any)?.length ?? 1)
+const wireframe = ref(false);
-    .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)
 
 // 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
+  // Count the number of faces, edges and vertices
-  // of not actually removing the primitives from the scene graph
+  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-expansion-panel-title collapse-icon="hide-this-icon" expand-icon="hide-this-icon">
-      <v-btn-toggle v-model="enabledFeatures" multiple @click.stop color="surface-light">
+      <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-checkbox-btn v-model="clipPlaneSwappedX" falseIcon="mdi-checkbox-blank-outline"
-                          v-model="clipPlaneSwappedX">
+                          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-checkbox-btn v-model="clipPlaneSwappedZ" falseIcon="mdi-checkbox-blank-outline"
-                          v-model="clipPlaneSwappedZ">
+                          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-checkbox-btn v-model="clipPlaneSwappedY" falseIcon="mdi-checkbox-blank-outline"
-                          v-model="clipPlaneSwappedY">
+                          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>
@@ -405,11 +444,12 @@ props.viewer!!.onElemReady((elem) => elem.addEventListener('load', onModelLoad))
 }
 
 .model-name {
-  width: 130px;
+  width: 179px;
-  min-height: 1.15em; /* HACK: Avoid eating the bottom of the text when using 1 line */
+  font-size: 110%;
-  max-height: 2em;
+  overflow-x: clip;
+  overflow-y: visible; /* HACK: bottom of text is lost otherwise (due to buggy -webkit-box bounds?) */
+  word-wrap: break-word;
   text-overflow: ellipsis;
-  overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* https://caniuse.com/?search=line-clamp */
   -webkit-box-orient: vertical;

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})

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'

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";

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<{ viewer: InstanceType<typeof ModelViewerWrapper> }>();
-
-const props = defineProps<{ elem: ModelViewerElement | null, scene: ModelScene }>();
 
 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();
+    if (!props.viewer.elem || !props.viewer.controls) return;
-    let lookAt = scene.getTarget().clone().add(scene.target.position);
+    // Animate the controls to the new wanted angle
-    let magnitude = lookFrom.clone().sub(lookAt).length()
+    const controls = props.viewer.controls;
-    let direction = new Vector3(axis.direction.x, axis.direction.y, axis.direction.z);
+    const {theta: curTheta/*, phi: curPhi*/} = (controls as any).goalSpherical;
-    let newLookFrom = lookAt.clone().add(direction.clone().multiplyScalar(magnitude));
+    let wantedTheta = NaN;
-    //console.log("New camera position", newLookFrom)
+    let wantedPhi = NaN;
-    scene.getCamera().position.copy(newLookFrom);
+    let attempt = 0
-    scene.getCamera().lookAt(lookAt);
+    while ((attempt == 0 || curTheta == wantedTheta) && attempt < 2) {
-    if ((scene as any).__perspectiveCamera) { // HACK: Make the hacky ortho also work
+      if (attempt > 0) { // Flip the camera if the user clicks on the same axis
-      (scene as any).__perspectiveCamera.position.copy(newLookFrom);
+        axis.direction.x = -axis.direction.x;
-      (scene as any).__perspectiveCamera.lookAt(lookAt);
+        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
 }

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', mouseDownListener); // Avoid clicking when dragging
-    elem.addEventListener('mousedown', selectionMoveListener); // Avoid clicking when dragging
+    elem.addEventListener('mouseup', mouseUpListener);
-    elem.addEventListener('load', () => {
+    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 :color="selectionEnabled ? 'surface-light' : ''" icon @click="toggleSelection">
-    <v-btn icon @click="toggleSelection" :color="selectionEnabled ? 'surface-light' : ''">
+    <v-tooltip activator="parent">{{ selectionEnabled ? 'Disable (s)election mode' : 'Enable (s)election mode' }}
-      <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-tooltip>
-  </div>
+    <svg-icon :path="mdiCursorDefaultClick" type="mdi"/>
-  <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"/>
   </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;
+  float: right;
-  width: calc(100% - 48px);
+  height: 36px;
   position: relative;
   top: -12px;
+  width: calc(100% - 48px);
 }
 </style>

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
+  // The camera change may take a frame to take effect, dispatch the event after a delay
-  requestIdleCallback(() => props.viewer?.elem?.dispatchEvent(
+  await new Promise((resolve) => requestAnimationFrame(resolve));
-      new CustomEvent('camera-change', {detail: {source: 'none'}})), {timeout: 100})
+  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();
+  props.viewer?.scene?.setTarget(0, 0, 0); // Center the target
-  viewerEl.zoom(3);
+  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>

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();
     }

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
+    // Extract internals of model-viewer in order to hack unsupported features
-    let banner = elem.value.querySelector('.initial-load-banner');
-    if (banner) banner.remove();
-    // Set the scene and renderer
     scene.value = elem.value[$scene] as ModelScene;
     renderer.value = elem.value[$renderer] as Renderer;
-    // Emit the load event
+    controls.value = (elem.value as any)[$controls] as SmoothControls;
-    emit('load')
+    // 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) => {
+watch(disableTap, (newDisableTap) => {
-  // Rerender not auto triggered? This works anyway...
+  if (elem.value) elem.value.disableTap = newDisableTap;
-  if (value) elem.value?.setAttribute('disable-tap', '');
-  else elem.value?.removeAttribute('disable-tap');
 });
 </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
+  <model-viewer ref="elem" :ar="settings.arModes.length > 0" :ar-modes="settings.arModes" :autoplay="settings.autoplay"
-                camera-orbit="30deg 75deg auto" max-camera-orbit="Infinity 180deg auto"
+                :environment-image="settings.background" :exposure="settings.exposure"
-                min-camera-orbit="-Infinity 0deg 5%" :disable-tap="disableTap" :exposure="settings.exposure"
+                :orbit-sensitivity="settings.orbitSensitivity" :pan-sensitivity="settings.panSensitivity"
-                :shadow-intensity="settings.shadowIntensity" interaction-prompt="none" :autoplay="settings.autoplay"
+                :poster="poster" :shadow-intensity="settings.shadowIntensity" :skybox-image="settings.background"
-                :ar="settings.arModes.length > 0" :ar-modes="settings.arModes" :skybox-image="settings.background"
+                :src="props.src" :zoom-sensitivity="settings.zoomSensitivity" alt="The 3D model(s)" camera-controls
-                :environment-image="settings.background">
+                camera-orbit="30deg 75deg auto" interaction-prompt="none" max-camera-orbit="Infinity 180deg auto"
-    <slot></slot> <!-- Controls, annotations, etc. -->
+                min-camera-orbit="-Infinity 0deg 5%" style="width: 100%; height: 100%">
-    <div class="annotation initial-load-banner">
+    <slot></slot>
-      Trying to load models from...
+    <!-- Add a progress bar to the top of the model viewer -->
-      <v-list v-for="src in settings.preload" :key="src">
+    <div ref="progressBar" slot="progress-bar" class="progress-bar">
-        <v-list-item>{{ src }}</v-list-item>
+      <div ref="updateBar" class="update-bar"/>
-      </v-list>
-      <!-- Too much idle CPU usage: <loading></loading> -->
     </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"
+          <rect v-if="line.centerText"
-                :y="(line.start2D[1] + line.end2D[1]) / 2 - line.centerTextSize[1]/2 - 2"
+                :height="line.centerTextSize[1] + 4"
-                :width="line.centerTextSize[0] + 8" :height="line.centerTextSize[1] + 4"
+                :width="line.centerTextSize[0] + 8"
-                fill="gray" fill-opacity="0.75" rx="4" ry="4" stroke="black" v-if="line.centerText"/>
+                :x="(line.start2D[0] + line.end2D[0]) / 2 - line.centerTextSize[0]/2 - 4"
-          <text :x="(line.start2D[0] + line.end2D[0]) / 2" :y="(line.start2D[1] + line.end2D[1]) / 2"
+                :y="(line.start2D[1] + line.end2D[1]) / 2 - line.centerTextSize[1]/2 - 2" fill="gray"
-                text-anchor="middle" dominant-baseline="middle" font-size="16" fill="black"
+                fill-opacity="0.75" rx="4" ry="4" stroke="black"/>
-                :class="'line' + lineId + '_text'" v-if="line.centerText">
+          <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 {
+.progress-bar {
-  width: 300px;
+  display: block;
-  margin: auto;
+  pointer-events: none;
-  margin-top: 3em;
+  width: 100%;
-  overflow: hidden;
+  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 {
+.update-bar {
-  overflow: hidden;
+  background-color: rgba(255, 255, 255, 0.9);
+  width: 0;
+  height: 100%;
+  border-radius: 25px;
+  float: left;
+  transition: width 0.3s;
 }
 </style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-cad-viewer",
-  "version": "0.7.0",
+  "version": "0.8.9",
   "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",
+    "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^20.11.30",
+    "@types/node": "^20.12.2",
-    "@types/three": "^0.162.0",
+    "@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"
   }
 }

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.50.0-cp310-cp310-macosx_10_9_universal2.whl", hash = "sha256:effd303fb422f8ce06543a36ca69148471144c534cc25f30e5be752bc4f46736"},
-    {file = "fonttools-4.49.0-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:ac9a745b7609f489faa65e1dc842168c18530874a5f5b742ac3dd79e26bca8bc"},
+    {file = "fonttools-4.50.0-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:7913992ab836f621d06aabac118fc258b9947a775a607e1a737eb3a91c360335"},
-    {file = "fonttools-4.49.0-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:0ba0e00620ca28d4ca11fc700806fd69144b463aa3275e1b36e56c7c09915559"},
+    {file = "fonttools-4.50.0-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:8e0a1c5bd2f63da4043b63888534b52c5a1fd7ae187c8ffc64cbb7ae475b9dab"},
-    {file = "fonttools-4.49.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:cdee3ab220283057e7840d5fb768ad4c2ebe65bdba6f75d5d7bf47f4e0ed7d29"},
+    {file = "fonttools-4.50.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:d40fc98540fa5360e7ecf2c56ddf3c6e7dd04929543618fd7b5cc76e66390562"},
-    {file = "fonttools-4.49.0-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:ce7033cb61f2bb65d8849658d3786188afd80f53dad8366a7232654804529532"},
+    {file = "fonttools-4.50.0-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:9fff65fbb7afe137bac3113827855e0204482727bddd00a806034ab0d3951d0d"},
-    {file = "fonttools-4.49.0-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:07bc5ea02bb7bc3aa40a1eb0481ce20e8d9b9642a9536cde0218290dd6085828"},
+    {file = "fonttools-4.50.0-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:b1aeae3dd2ee719074a9372c89ad94f7c581903306d76befdaca2a559f802472"},
-    {file = "fonttools-4.49.0-cp310-cp310-win32.whl", hash = "sha256:86eef6aab7fd7c6c8545f3ebd00fd1d6729ca1f63b0cb4d621bccb7d1d1c852b"},
+    {file = "fonttools-4.50.0-cp310-cp310-win32.whl", hash = "sha256:e9623afa319405da33b43c85cceb0585a6f5d3a1d7c604daf4f7e1dd55c03d1f"},
-    {file = "fonttools-4.49.0-cp310-cp310-win_amd64.whl", hash = "sha256:1fac1b7eebfce75ea663e860e7c5b4a8831b858c17acd68263bc156125201abf"},
+    {file = "fonttools-4.50.0-cp310-cp310-win_amd64.whl", hash = "sha256:778c5f43e7e654ef7fe0605e80894930bc3a7772e2f496238e57218610140f54"},
-    {file = "fonttools-4.49.0-cp311-cp311-macosx_10_9_universal2.whl", hash = "sha256:edc0cce355984bb3c1d1e89d6a661934d39586bb32191ebff98c600f8957c63e"},
+    {file = "fonttools-4.50.0-cp311-cp311-macosx_10_9_universal2.whl", hash = "sha256:3dfb102e7f63b78c832e4539969167ffcc0375b013080e6472350965a5fe8048"},
-    {file = "fonttools-4.49.0-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:83a0d9336de2cba86d886507dd6e0153df333ac787377325a39a2797ec529814"},
+    {file = "fonttools-4.50.0-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:9e58fe34cb379ba3d01d5d319d67dd3ce7ca9a47ad044ea2b22635cd2d1247fc"},
-    {file = "fonttools-4.49.0-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:36c8865bdb5cfeec88f5028e7e592370a0657b676c6f1d84a2108e0564f90e22"},
+    {file = "fonttools-4.50.0-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:2c673ab40d15a442a4e6eb09bf007c1dda47c84ac1e2eecbdf359adacb799c24"},
-    {file = "fonttools-4.49.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:33037d9e56e2562c710c8954d0f20d25b8386b397250d65581e544edc9d6b942"},
+    {file = "fonttools-4.50.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9b3ac35cdcd1a4c90c23a5200212c1bb74fa05833cc7c14291d7043a52ca2aaa"},
-    {file = "fonttools-4.49.0-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:8fb022d799b96df3eaa27263e9eea306bd3d437cc9aa981820850281a02b6c9a"},
+    {file = "fonttools-4.50.0-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:8844e7a2c5f7ecf977e82eb6b3014f025c8b454e046d941ece05b768be5847ae"},
-    {file = "fonttools-4.49.0-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:33c584c0ef7dc54f5dd4f84082eabd8d09d1871a3d8ca2986b0c0c98165f8e86"},
+    {file = "fonttools-4.50.0-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:f849bd3c5c2249b49c98eca5aaebb920d2bfd92b3c69e84ca9bddf133e9f83f0"},
-    {file = "fonttools-4.49.0-cp311-cp311-win32.whl", hash = "sha256:cbe61b158deb09cffdd8540dc4a948d6e8f4d5b4f3bf5cd7db09bd6a61fee64e"},
+    {file = "fonttools-4.50.0-cp311-cp311-win32.whl", hash = "sha256:39293ff231b36b035575e81c14626dfc14407a20de5262f9596c2cbb199c3625"},
-    {file = "fonttools-4.49.0-cp311-cp311-win_amd64.whl", hash = "sha256:fc11e5114f3f978d0cea7e9853627935b30d451742eeb4239a81a677bdee6bf6"},
+    {file = "fonttools-4.50.0-cp311-cp311-win_amd64.whl", hash = "sha256:c33d5023523b44d3481624f840c8646656a1def7630ca562f222eb3ead16c438"},
-    {file = "fonttools-4.49.0-cp312-cp312-macosx_10_9_universal2.whl", hash = "sha256:d647a0e697e5daa98c87993726da8281c7233d9d4ffe410812a4896c7c57c075"},
+    {file = "fonttools-4.50.0-cp312-cp312-macosx_10_9_universal2.whl", hash = "sha256:b4a886a6dbe60100ba1cd24de962f8cd18139bd32808da80de1fa9f9f27bf1dc"},
-    {file = "fonttools-4.49.0-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:f3bbe672df03563d1f3a691ae531f2e31f84061724c319652039e5a70927167e"},
+    {file = "fonttools-4.50.0-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:b2ca1837bfbe5eafa11313dbc7edada79052709a1fffa10cea691210af4aa1fa"},
-    {file = "fonttools-4.49.0-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:bebd91041dda0d511b0d303180ed36e31f4f54b106b1259b69fade68413aa7ff"},
+    {file = "fonttools-4.50.0-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:a0493dd97ac8977e48ffc1476b932b37c847cbb87fd68673dee5182004906828"},
-    {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.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.49.0-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:ea329dafb9670ffbdf4dbc3b0e5c264104abcd8441d56de77f06967f032943cb"},
+    {file = "fonttools-4.50.0-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:3566bfb8c55ed9100afe1ba6f0f12265cd63a1387b9661eb6031a1578a28bad1"},
-    {file = "fonttools-4.49.0-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:c076a9e548521ecc13d944b1d261ff3d7825048c338722a4bd126d22316087b7"},
+    {file = "fonttools-4.50.0-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:35e10ddbc129cf61775d58a14f2d44121178d89874d32cae1eac722e687d9019"},
-    {file = "fonttools-4.49.0-cp312-cp312-win32.whl", hash = "sha256:b607ea1e96768d13be26d2b400d10d3ebd1456343eb5eaddd2f47d1c4bd00880"},
+    {file = "fonttools-4.50.0-cp312-cp312-win32.whl", hash = "sha256:cc8140baf9fa8f9b903f2b393a6c413a220fa990264b215bf48484f3d0bf8710"},
-    {file = "fonttools-4.49.0-cp312-cp312-win_amd64.whl", hash = "sha256:a974c49a981e187381b9cc2c07c6b902d0079b88ff01aed34695ec5360767034"},
+    {file = "fonttools-4.50.0-cp312-cp312-win_amd64.whl", hash = "sha256:0ccc85fd96373ab73c59833b824d7a73846670a0cb1f3afbaee2b2c426a8f931"},
-    {file = "fonttools-4.49.0-cp38-cp38-macosx_10_9_universal2.whl", hash = "sha256:b85ec0bdd7bdaa5c1946398cbb541e90a6dfc51df76dfa88e0aaa41b335940cb"},
+    {file = "fonttools-4.50.0-cp38-cp38-macosx_10_9_universal2.whl", hash = "sha256:e270a406219af37581d96c810172001ec536e29e5593aa40d4c01cca3e145aa6"},
-    {file = "fonttools-4.49.0-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:af20acbe198a8a790618ee42db192eb128afcdcc4e96d99993aca0b60d1faeb4"},
+    {file = "fonttools-4.50.0-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:ac2463de667233372e9e1c7e9de3d914b708437ef52a3199fdbf5a60184f190c"},
-    {file = "fonttools-4.49.0-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4d418b1fee41a1d14931f7ab4b92dc0bc323b490e41d7a333eec82c9f1780c75"},
+    {file = "fonttools-4.50.0-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:47abd6669195abe87c22750dbcd366dc3a0648f1b7c93c2baa97429c4dc1506e"},
-    {file = "fonttools-4.49.0-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:b44a52b8e6244b6548851b03b2b377a9702b88ddc21dcaf56a15a0393d425cb9"},
+    {file = "fonttools-4.50.0-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:074841375e2e3d559aecc86e1224caf78e8b8417bb391e7d2506412538f21adc"},
-    {file = "fonttools-4.49.0-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:7c7125068e04a70739dad11857a4d47626f2b0bd54de39e8622e89701836eabd"},
+    {file = "fonttools-4.50.0-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:0743fd2191ad7ab43d78cd747215b12033ddee24fa1e088605a3efe80d6984de"},
-    {file = "fonttools-4.49.0-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:29e89d0e1a7f18bc30f197cfadcbef5a13d99806447c7e245f5667579a808036"},
+    {file = "fonttools-4.50.0-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:3d7080cce7be5ed65bee3496f09f79a82865a514863197ff4d4d177389e981b0"},
-    {file = "fonttools-4.49.0-cp38-cp38-win32.whl", hash = "sha256:9d95fa0d22bf4f12d2fb7b07a46070cdfc19ef5a7b1c98bc172bfab5bf0d6844"},
+    {file = "fonttools-4.50.0-cp38-cp38-win32.whl", hash = "sha256:a467ba4e2eadc1d5cc1a11d355abb945f680473fbe30d15617e104c81f483045"},
-    {file = "fonttools-4.49.0-cp38-cp38-win_amd64.whl", hash = "sha256:768947008b4dc552d02772e5ebd49e71430a466e2373008ce905f953afea755a"},
+    {file = "fonttools-4.50.0-cp38-cp38-win_amd64.whl", hash = "sha256:f77e048f805e00870659d6318fd89ef28ca4ee16a22b4c5e1905b735495fc422"},
-    {file = "fonttools-4.49.0-cp39-cp39-macosx_10_9_universal2.whl", hash = "sha256:08877e355d3dde1c11973bb58d4acad1981e6d1140711230a4bfb40b2b937ccc"},
+    {file = "fonttools-4.50.0-cp39-cp39-macosx_10_9_universal2.whl", hash = "sha256:b6245eafd553c4e9a0708e93be51392bd2288c773523892fbd616d33fd2fda59"},
-    {file = "fonttools-4.49.0-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:fdb54b076f25d6b0f0298dc706acee5052de20c83530fa165b60d1f2e9cbe3cb"},
+    {file = "fonttools-4.50.0-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:a4062cc7e8de26f1603323ef3ae2171c9d29c8a9f5e067d555a2813cd5c7a7e0"},
-    {file = "fonttools-4.49.0-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:0af65c720520710cc01c293f9c70bd69684365c6015cc3671db2b7d807fe51f2"},
+    {file = "fonttools-4.50.0-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:34692850dfd64ba06af61e5791a441f664cb7d21e7b544e8f385718430e8f8e4"},
-    {file = "fonttools-4.49.0-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:1f255ce8ed7556658f6d23f6afd22a6d9bbc3edb9b96c96682124dc487e1bf42"},
+    {file = "fonttools-4.50.0-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:678dd95f26a67e02c50dcb5bf250f95231d455642afbc65a3b0bcdacd4e4dd38"},
-    {file = "fonttools-4.49.0-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:d00af0884c0e65f60dfaf9340e26658836b935052fdd0439952ae42e44fdd2be"},
+    {file = "fonttools-4.50.0-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:4f2ce7b0b295fe64ac0a85aef46a0f2614995774bd7bc643b85679c0283287f9"},
-    {file = "fonttools-4.49.0-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:263832fae27481d48dfafcc43174644b6706639661e242902ceb30553557e16c"},
+    {file = "fonttools-4.50.0-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:d346f4dc2221bfb7ab652d1e37d327578434ce559baf7113b0f55768437fe6a0"},
-    {file = "fonttools-4.49.0-cp39-cp39-win32.whl", hash = "sha256:0404faea044577a01bb82d47a8fa4bc7a54067fa7e324785dd65d200d6dd1133"},
+    {file = "fonttools-4.50.0-cp39-cp39-win32.whl", hash = "sha256:a51eeaf52ba3afd70bf489be20e52fdfafe6c03d652b02477c6ce23c995222f4"},
-    {file = "fonttools-4.49.0-cp39-cp39-win_amd64.whl", hash = "sha256:b050d362df50fc6e38ae3954d8c29bf2da52be384649ee8245fdb5186b620836"},
+    {file = "fonttools-4.50.0-cp39-cp39-win_amd64.whl", hash = "sha256:8639be40d583e5d9da67795aa3eeeda0488fb577a1d42ae11a5036f18fb16d93"},
-    {file = "fonttools-4.49.0-py3-none-any.whl", hash = "sha256:af281525e5dd7fa0b39fb1667b8d5ca0e2a9079967e14c4bfe90fd1cd13e0f18"},
+    {file = "fonttools-4.50.0-py3-none-any.whl", hash = "sha256:48fa36da06247aa8282766cfd63efff1bb24e55f020f29a335939ed3844d20d3"},
-    {file = "fonttools-4.49.0.tar.gz", hash = "sha256:ebf46e7f01b7af7861310417d7c49591a85d99146fc23a5ba82fdb28af156321"},
+    {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.1-py3-none-any.whl", hash = "sha256:f085493f79efb0644f270a9bf2892843142d80d7174bbbd2f3713f2a589dc633"},
-    {file = "marshmallow-3.21.0.tar.gz", hash = "sha256:20f53be28c6e374a711a16165fb22a8dc6003e3f7cda1285e3ca777b9193885b"},
+    {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-24.0-py3-none-any.whl", hash = "sha256:2ddfb553fdf02fb784c234c7ba6ccc288296ceabec964ad2eae3777778130bc5"},
-    {file = "packaging-23.2.tar.gz", hash = "sha256:048fb0e9405036518eaaf48a55953c750c11e1a1b68e0dd1a9d62ed0c092cfc5"},
+    {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.2-py3-none-any.whl", hash = "sha256:f9db75911801ed778fe61bb643079ff86601aca99fcae6345aa67292038fb742"},
-    {file = "pyparsing-3.1.1.tar.gz", hash = "sha256:ede28a1a32462f5a9705e07aea48001a08f7cf81a021585011deba701581a0db"},
+    {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.2-py3-none-any.whl", hash = "sha256:fcdf85684a772ddeba87db2f398ce00b40ff550d1528c03c14dbf6a02003cd80"},
-    {file = "traitlets-5.14.1.tar.gz", hash = "sha256:8585105b371a04b8316a43d5ce29c098575c2e477850b62b848b964f1444527e"},
+    {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"

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "yacv-server"
-version = "0.7.0"
+version = "0.8.9"
 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"

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),

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:
+            if shape and shape not in shapes:
-                shapes.append((key, shape))
+                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()

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)

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

yacv_server/tessellate.py

@@ -1,14 +1,9 @@
-import hashlib
+from typing import List, Dict, Tuple
-import io
-import re
-from typing import List, Dict, Tuple, Union
 
 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()

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))
+                    glb_bytes = b''.join(glb_list_of_bytes)
-                    logger.info('export(%s) took %.3f seconds, %d parts', name, time.time() - start,
+                    publish_to.publish(glb_bytes)
-                                len(gltf.meshes[0].primitives))
+                    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}"

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":
+"@tsconfig/node20@^20.1.4":
-  version "20.1.3"
+  version "20.1.4"
-  resolved "https://registry.yarnpkg.com/@tsconfig/node20/-/node20-20.1.3.tgz#b3b4cf785e1b390a6ab48a68aa594a25960d2fe8"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node20/-/node20-20.1.4.tgz#3457d42eddf12d3bde3976186ab0cd22b85df928"
-  integrity sha512-XeWn6Gms5MaQWdj+C4fuxuo/Icy8ckh+BwAIijhX2LKRHHt1OuctLLLlB0F4EPi55m2IUJNTnv8FH9kSBI7Ogw==
+  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":
+"@types/node@^20.12.2":
-  version "20.11.30"
+  version "20.12.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.30.tgz#9c33467fc23167a347e73834f788f4b9f399d66f"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.2.tgz#9facdd11102f38b21b4ebedd9d7999663343d72e"
-  integrity sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==
+  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":
+"@types/three@^0.160.0":
-  version "0.162.0"
+  version "0.160.0"
-  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.162.0.tgz#79d170c88f14b2eaee6b76af00fc4016a533e586"
+  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.160.0.tgz#7915a97e0a14ccaa9ccbb9f190c5730b04a23075"
-  integrity sha512-0j5yZcVukVIhrhSIC7+LmBPkkMoMuEJ1AfYBZfgNytdYqYREMuiyXWhYOMeZLBElTEAlJIZn7r2W3vqTIgjWlg==
+  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:
+terser@^5.30.0:
-  version "5.29.2"
+  version "5.30.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.29.2.tgz#c17d573ce1da1b30f21a877bffd5655dd86fdb35"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.30.0.tgz#64cb2af71e16ea3d32153f84d990f9be0cdc22bf"
-  integrity sha512-ZiGkhUBIM+7LwkNjXYJq8svgkd+QK3UUr0wJqY4MieaezBSAIPgbSPZyIx0idM6XWK5CMzSWa8MJIzmRcB8Caw==
+  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:
+three@^0.160.1:
-  version "0.162.0"
+  version "0.160.1"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.162.0.tgz#b15a511f1498e0c42d4d00bbb411c7527b06097e"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.160.1.tgz#61fe2907312e8604b1f64187f58e047503847413"
-  integrity sha512-xfCYj4RnlozReCmUd+XQzj6/5OjDNHBy5nT6rVwrOKGENAvpXe2z1jL+DZYaMu4/9pNsjH/4Os/VvS9IrH7IOQ==
+  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:
+vite@^5.2.7:
-  version "5.2.6"
+  version "5.2.7"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.2.6.tgz#fc2ce309e0b4871e938cb0aca3b96c422c01f222"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.2.7.tgz#e1b8a985eb54fcb9467d7f7f009d87485016df6e"
-  integrity sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==
+  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:
+vuetify@^3.5.13:
-  version "3.5.11"
+  version "3.5.13"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.5.11.tgz#9e5b628544e736de0b7f236b704539d544588152"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.5.13.tgz#24a45d19ce5dcf71b2653f0bcf3ea91edf1f406c"
-  integrity sha512-us5I0jyFwIQYG4v41PFmVMkoc/oJddVT4C2RFjJTI99ttigbQ92gsTeG5SB8BPfmfnUS4paR5BedZwk6W3KlJw==
+  integrity sha512-3ZyIoHgB2GR87ojIpqNwkkRXlUNTEKh83fjUuQ1hOKdTXzEuZXBgtfUt9kp4WOVnYILGdZKWTJ6gv8nXOa/tZA==
 
 walk-up-path@^3.0.1:
   version "3.0.1"