lots of improvements

src/misc/network.ts

@@ -1 +1,63 @@
+export class NetworkUpdateEvent extends Event {
+    name: string;
+    url: string;
+    constructor(name: string, url: string) {
+        super("update");
+        this.name = name;
+        this.url = url;
+    }
+}
 
+/** Listens for updates and emits events when a model changes */
+export class NetworkManager extends EventTarget {
+    private knownObjectHashes: { [name: string]: string } = {};
+
+    /**
+     * Tries to load a new model (.glb or .glbs) from the given URL.
+     *
+     * If the URL uses the websocket protocol (ws:// or wss://), the server will be continuously monitored for changes.
+     * In this case, it will only trigger updates if the name or hash of any model changes.
+     *
+     * Updates will be emitted as "update" events, including the download URL and the model name.
+     */
+    async load(url: string) {
+        if (url.startsWith("ws://") || url.startsWith("wss://")) {
+            this.monitorWebSocket(url);
+        } else {
+            // Get the last part of the URL as the "name" of the model
+            let name = url.split("/").pop();
+            name = name?.split(".")[0] || `unknown-${Math.random()}`;
+            let prevHash = this.knownObjectHashes[name];
+            // Use a head request to get the hash of the file
+            let response = await fetch(url, { method: "HEAD" });
+            let hash = response.headers.get("etag");
+            // Only trigger an update if the hash has changed
+            if (hash !== prevHash) {
+                this.knownObjectHashes[name] = hash;
+                this.dispatchEvent(new NetworkUpdateEvent(name, url));
+            }
+        }
+    }
+
+    private monitorWebSocket(url: string) {
+        let ws = new WebSocket(url);
+        ws.onmessage = (event) => {
+            let data = JSON.parse(event.data);
+            console.debug("WebSocket message", data);
+            let name = data.name;
+            let prevHash = this.knownObjectHashes[name];
+            let hash = data.hash;
+            if (hash !== prevHash) {
+                this.knownObjectHashes[name] = hash;
+                this.dispatchEvent(new NetworkUpdateEvent(name, data.url));
+            }
+        };
+        ws.onerror = (event) => {
+            console.error("WebSocket error", event);
+        }
+        ws.onclose = () => {
+            console.trace("WebSocket closed, reconnecting very soon");
+            setTimeout(() => this.monitorWebSocket(url), 500);
+        }
+    }
+}

src/misc/scene.ts

@@ -0,0 +1,41 @@
+import type {ModelViewerElement} from '@google/model-viewer';
+import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
+import {ref, Ref} from 'vue';
+import {Document} from '@gltf-transform/core';
+import {ModelViewerInfo} from "./viewer/ModelViewerWrapper.vue";
+
+type SceneManagerData = {
+    /** When updated, forces the viewer to load a new model replacing the current one */
+    viewerSrc: string | null
+
+    /** The model viewer HTML element with all APIs */
+    viewer: ModelViewerElement | null
+    /** The (hidden) scene of the model viewer */
+    viewerScene: ModelScene | null
+
+    /** The currently shown document, which must match the viewerSrc. */
+    document: Document | null
+}
+
+/** This class helps manage SceneManagerData. All methods are static to support reactivity... */
+export class SceneMgr {
+    private constructor() {
+    }
+
+    /** Creates a new SceneManagerData object */
+    static newData(): Ref<SceneManagerData> {
+        return ref({
+            viewerSrc: null,
+            viewer: null,
+            viewerScene: null,
+            document: null,
+        });
+    }
+
+    /** Should be called any model finishes loading successfully (after a viewerSrc update) */
+    static onload(data: SceneManagerData, info: typeof ModelViewerInfo) {
+        console.log("ModelViewer loaded", info);
+        data.viewer = info.viewer;
+        data.viewerScene = info.scene;
+    }
+}

src/misc/settings.ts

@@ -4,9 +4,9 @@ export const settings = {
         // @ts-ignore
         new URL('../../assets/fox.glb', import.meta.url).href,
         // @ts-ignore
-        new URL('../../assets/logo.glbs', import.meta.url).href,
+        // new URL('../../assets/logo.glbs', import.meta.url).href,
         // Websocket URLs automatically listen for new models from the python backend
-        "ws://localhost:8080/"
+        //"ws://localhost:8080/"
     ],
     // ModelViewer settings
     autoplay: true,