Automatically update version to 0.8.3

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

frontend/App.vue

@@ -33,6 +33,10 @@ 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);
@@ -70,6 +74,8 @@ async function onModelRemoveRequest(name: string) {
 
 // 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) {

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/network.ts

@@ -80,6 +80,9 @@ export class NetworkManager extends EventTarget {
                             controller.abort(); // Notify the server that we are done
                         });
                     }
+                } else {
+                    // Server is down, wait a little longer before retrying
+                    await new Promise(resolve => setTimeout(resolve, 10 * settings.monitorEveryMs));
                 }
                 controller.abort();
             } catch (e) { // Ignore errors (retry very soon)
@@ -90,28 +93,47 @@ export class NetworkManager extends EventTarget {
 
     private foundModel(name: string, hash: string | null, url: string, isRemove: boolean | null, disconnect: () => void = () => {
     }) {
-        let prevHash = this.knownObjectHashes[name];
-        // console.debug("Found model", name, "with hash", hash, "and previous hash", prevHash);
-        if (!hash || hash !== prevHash || isRemove) {
-            // Update known hashes
-            if (isRemove == false) {
-                this.knownObjectHashes[name] = hash;
-            } else if (isRemove == true) {
-                if (!(name in this.knownObjectHashes)) return; // Nothing to remove...
-                delete this.knownObjectHashes[name];
-                // Also update buffered updates if the model is removed
-                this.bufferedUpdates = this.bufferedUpdates.filter(m => m.name !== name);
-            }
-            let newModel = new NetworkUpdateEventModel(name, url, hash, isRemove);
-            this.bufferedUpdates.push(newModel);
+        console.debug("Found model", name, "with hash", hash, "at", url, "isRemove", isRemove);
 
-            // Optimization: try to batch updates automatically for faster rendering
-            if (this.batchTimeout !== null) clearTimeout(this.batchTimeout);
-            this.batchTimeout = setTimeout(() => {
-                this.dispatchEvent(new NetworkUpdateEvent(this.bufferedUpdates, disconnect));
-                this.bufferedUpdates = [];
-            }, batchTimeout);
-        }
+        // We only care about the latest update per model name
+        this.bufferedUpdates = this.bufferedUpdates.filter(m => m.name !== name);
+
+        // Add the new model to the list of updates and dispatch the early update
+        let upd = new NetworkUpdateEventModel(name, url, hash, isRemove);
+        this.bufferedUpdates.push(upd);
+        this.dispatchEvent(new CustomEvent("update-early", {detail: this.bufferedUpdates}));
+
+        // Optimization: try to batch updates automatically for faster rendering
+        if (this.batchTimeout !== null) clearTimeout(this.batchTimeout);
+        this.batchTimeout = setTimeout(() => {
+            // Update known hashes for minimal updates
+            for (let model of this.bufferedUpdates) {
+                if (model.isRemove == false && model.hash && model.hash === this.knownObjectHashes[model.name]) {
+                    // Delete this useless update
+                    let foundFirst = false;
+                    this.bufferedUpdates = this.bufferedUpdates.filter(m => {
+                        if (m === model) {
+                            if (!foundFirst) { // Remove only first full match
+                                foundFirst = true;
+                                return false;
+                            }
+                        }
+                        return true;
+                    })
+                } else {
+                    // Keep this update and update the last known hash
+                    if (model.isRemove == true) {
+                        if (model.name in this.knownObjectHashes) delete this.knownObjectHashes[model.name];
+                    } else if (model.isRemove == false) {
+                        this.knownObjectHashes[model.name] = model.hash;
+                    }
+                }
+            }
+
+            // Dispatch the event to actually update the models
+            this.dispatchEvent(new NetworkUpdateEvent(this.bufferedUpdates, disconnect));
+            this.bufferedUpdates = [];
+        }, batchTimeout);
     }
 }
 

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/viewer/ModelViewerWrapper.vue

@@ -8,8 +8,8 @@ import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelSc
 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
@@ -41,8 +41,31 @@ onMounted(() => {
     emit('load')
   });
   elem.value.addEventListener('camera-change', onCameraChange);
+  elem.value.addEventListener('progress', (ev) => onProgress((ev as any).detail.totalProgress));
 });
 
+// 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);
+};
+
 class Line3DData {
   startHotspot: HTMLElement = document.body
   endHotspot: HTMLElement = document.body
@@ -137,7 +160,7 @@ function entries(lines: { [id: number]: Line3DData }): [string, Line3DData][] {
   return Object.entries(lines);
 }
 
-defineExpose({elem, onElemReady, scene, renderer, addLine3D, removeLine3D});
+defineExpose({elem, onElemReady, scene, renderer, addLine3D, removeLine3D, onProgress});
 
 let {disableTap} = inject<{ disableTap: Ref<boolean> }>('disableTap')!!;
 watch(disableTap, (value) => {
@@ -155,7 +178,8 @@ watch(disableTap, (value) => {
                 :shadow-intensity="settings.shadowIntensity" interaction-prompt="none" :autoplay="settings.autoplay"
                 :ar="settings.arModes.length > 0" :ar-modes="settings.arModes" :skybox-image="settings.background"
                 :environment-image="settings.background">
-    <slot></slot> <!-- Controls, annotations, etc. -->
+    <slot></slot>
+    <!-- Display some information during initial load -->
     <div class="annotation initial-load-banner">
       Trying to load models from...
       <v-list v-for="src in settings.preload" :key="src">
@@ -163,6 +187,11 @@ watch(disableTap, (value) => {
       </v-list>
       <!-- Too much idle CPU usage: <loading></loading> -->
     </div>
+
+    <!-- Customize the progress bar -->
+    <div class="progress-bar" slot="progress-bar" ref="progressBar">
+      <div class="update-bar" ref="updateBar"/>
+    </div>
   </model-viewer>
 
   <!-- The SVG overlay for fake 3D lines attached to the model -->
@@ -223,4 +252,30 @@ watch(disableTap, (value) => {
 .initial-load-banner .v-list-item {
   overflow: hidden;
 }
+
+.progress-bar {
+  display: block;
+  pointer-events: none;
+  width: 100%;
+  height: 10%;
+  max-height: 2%;
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translate3d(-50%, 0%, 0);
+  border-radius: 25px;
+  box-shadow: 0 3px 10px 3px rgba(0, 0, 0, 0.5), 0 0 5px 1px rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity 0.3s;
+}
+
+.update-bar {
+  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.8.0",
+  "version": "0.8.3",
   "description": "",
   "license": "MIT",
   "private": true,
@@ -15,7 +15,8 @@
     "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",

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "yacv-server"
-version = "0.8.0"
+version = "0.8.3"
 description = "Yet Another CAD Viewer (server)"
 authors = ["Yeicor <4929005+Yeicor@users.noreply.github.com>"]
 license = "MIT"

vite.config.ts

@@ -28,7 +28,7 @@ export default defineConfig({
     build: {
         assetsDir: '.',
         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.
     },
     define: {
         __APP_NAME__: JSON.stringify(name),

yacv_server/cad.py

@@ -46,16 +46,16 @@ def get_shape(obj: CADLike, error: bool = True) -> Optional[CADCoreLike]:
         return None
 
 
-def grab_all_cad() -> List[Tuple[str, CADCoreLike]]:
+def grab_all_cad() -> set[Tuple[str, CADCoreLike]]:
     """ Grab all shapes by inspecting the stack """
     import inspect
     stack = inspect.stack()
-    shapes = []
+    shapes = set()
     for frame in stack:
         for key, value in frame.frame.f_locals.items():
             shape = get_shape(value, error=False)
-            if shape:
-                shapes.append((key, shape))
+            if shape and shape not in shapes:
+                shapes.add((key, shape))
     return shapes
 
 
@@ -91,13 +91,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 +114,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),

yacv_server/logo.py

@@ -19,9 +19,8 @@ def build_logo(text: bool = True) -> Dict[str, Union[Part, Location, str]]:
                 Text('Yet Another\nCAD Viewer', 7, font_path='/usr/share/fonts/TTF/OpenSans-Regular.ttf')
             extrude(amount=1)
 
-    logo_img_location = logo_obj.faces().group_by(Axis.X)[0].face().center_location  # Avoid overlapping:
-    logo_img_location.position = Vector(logo_img_location.position.X - 4e-2, logo_img_location.position.Y,
-                                        logo_img_location.position.Z)
+    logo_img_location = logo_obj.faces().group_by(Axis.X)[0].face().center_location
+    logo_img_location *= Location((0, 0, 4e-2), (0, 0, 90))  # Avoid overlapping and adjust placement
 
     logo_img_path = os.path.join(ASSETS_DIR, 'img.jpg')
     img_glb_bytes, img_name = image_to_gltf(logo_img_path, logo_img_location, height=18)

yacv_server/yacv.py

@@ -194,7 +194,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):
@@ -325,7 +325,7 @@ _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)
+    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 get_shape(value, error=False) is obj_shape:

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==