better bounding box camera change logic

src/models/Model.vue

@@ -118,9 +118,7 @@ function onModelLoad() {
 }
 
 // props.viewer.elem may not yet be available, so we need to wait for it
-watch(() => props.viewer?.elem, (elem) => {
+props.viewer.onElemReady((elem) => elem.addEventListener('load', onModelLoad))
-  elem.addEventListener('load', onModelLoad);
-});
 </script>
 
 <template>

src/tools/Selection.vue

@@ -176,9 +176,15 @@ function toggleShowBoundingBox() {
   updateBoundingBox();
 }
 
-let hasListeners = false;
+let viewerFound = false
-let firstLoad = true;
+watch(() => props.viewer, (viewer) => {
-watch(() => props.viewer?.elem, (elem) => {
+  if (!viewer) return;
+  if (viewerFound) return;
+  viewerFound = true;
+  let hasListeners = false;
+  let firstLoad = true;
+  // props.viewer.elem may not yet be available, so we need to wait for it
+  viewer.onElemReady((elem) => {
     if (hasListeners) return;
     hasListeners = true;
     elem.addEventListener('mouseup', selectionListener);
@@ -192,18 +198,19 @@ watch(() => props.viewer?.elem, (elem) => {
       }
     });
     let isWaiting = false;
-  let lastBoundingBoxUpdate = performance.now();
+    let lastCameraChange = 0
     elem.addEventListener('camera-change', () => {
       // Avoid updates while dragging (slow operation)
+      lastCameraChange = performance.now();
       if (isWaiting) return;
-    if (performance.now() - lastBoundingBoxUpdate < 1000) return;
       isWaiting = true;
       let waitingHandler: () => void;
       waitingHandler = () => {
-      if (mouseDownAt === null) {
+        // Ignore also inertia
+        let stillMoving = performance.now() - lastCameraChange < 100;
+        if (!stillMoving) {
           updateBoundingBox();
           isWaiting = false;
-        lastBoundingBoxUpdate = performance.now();
         } else {
           // If the mouse is still down, wait a little more
           setTimeout(waitingHandler, 100);
@@ -211,6 +218,7 @@ watch(() => props.viewer?.elem, (elem) => {
       };
       setTimeout(waitingHandler, 100); // Wait for the camera to stop moving
     });
+  });
 });
 
 let document: ShallowRef<Document> = inject('document');

src/viewer/ModelViewerWrapper.vue

@@ -6,7 +6,7 @@ import {settings} from "../misc/settings";
 import {onMounted} from "vue";
 import {$scene, $renderer} from "@google/model-viewer/lib/model-viewer-base";
 import Loading from "../misc/Loading.vue";
-import {ref} from "vue";
+import {ref, watch} from "vue";
 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";
@@ -117,7 +117,17 @@ function onCameraChangeLine(lineId: number) {
   }
 }
 
-defineExpose({elem, scene, renderer, addLine3D, removeLine3D});
+function onElemReady(callback: (elem: ModelViewerElement) => void) {
+  if (elem.value) {
+    callback(elem.value);
+  } else {
+    watch(() => elem.value, (elem) => {
+      if (elem) callback(elem);
+    });
+  }
+}
+
+defineExpose({elem, onElemReady, scene, renderer, addLine3D, removeLine3D});
 </script>
 
 <template>