From 2b2cbb517efba83afc8f0d92e1f4ef13df53f33e Mon Sep 17 00:00:00 2001
From: Yeicor <4929005+Yeicor@users.noreply.github.com>
Date: Wed, 28 Feb 2024 19:47:39 +0100
Subject: [PATCH] better bounding box camera change logic

---
 src/models/Model.vue              |  4 +-
 src/tools/Selection.vue           | 72 +++++++++++++++++--------------
 src/viewer/ModelViewerWrapper.vue | 14 +++++-
 3 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/src/models/Model.vue b/src/models/Model.vue
index 9c0bd6e..effc85a 100644
--- a/src/models/Model.vue
+++ b/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) => {
-  elem.addEventListener('load', onModelLoad);
-});
+props.viewer.onElemReady((elem) => elem.addEventListener('load', onModelLoad))
 </script>
 
 <template>
diff --git a/src/tools/Selection.vue b/src/tools/Selection.vue
index 864cac3..5189f27 100644
--- a/src/tools/Selection.vue
+++ b/src/tools/Selection.vue
@@ -176,40 +176,48 @@ function toggleShowBoundingBox() {
   updateBoundingBox();
 }
 
-let hasListeners = false;
-let firstLoad = true;
-watch(() => props.viewer?.elem, (elem) => {
-  if (hasListeners) return;
-  hasListeners = true;
-  elem.addEventListener('mouseup', selectionListener);
-  elem.addEventListener('mousedown', selectionMoveListener); // Avoid clicking when dragging
-  elem.addEventListener('load', () => {
-    if (firstLoad) {
-      toggleShowBoundingBox();
-      firstLoad = false;
-    } else {
-      updateBoundingBox();
-    }
-  });
-  let isWaiting = false;
-  let lastBoundingBoxUpdate = performance.now();
-  elem.addEventListener('camera-change', () => {
-    // Avoid updates while dragging (slow operation)
-    if (isWaiting) return;
-    if (performance.now() - lastBoundingBoxUpdate < 1000) return;
-    isWaiting = true;
-    let waitingHandler: () => void;
-    waitingHandler = () => {
-      if (mouseDownAt === null) {
-        updateBoundingBox();
-        isWaiting = false;
-        lastBoundingBoxUpdate = performance.now();
+let viewerFound = false
+watch(() => props.viewer, (viewer) => {
+  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);
+    elem.addEventListener('mousedown', selectionMoveListener); // Avoid clicking when dragging
+    elem.addEventListener('load', () => {
+      if (firstLoad) {
+        toggleShowBoundingBox();
+        firstLoad = false;
       } else {
-        // If the mouse is still down, wait a little more
-        setTimeout(waitingHandler, 100);
+        updateBoundingBox();
       }
-    };
-    setTimeout(waitingHandler, 100); // Wait for the camera to stop moving
+    });
+    let isWaiting = false;
+    let lastCameraChange = 0
+    elem.addEventListener('camera-change', () => {
+      // Avoid updates while dragging (slow operation)
+      lastCameraChange = performance.now();
+      if (isWaiting) return;
+      isWaiting = true;
+      let waitingHandler: () => void;
+      waitingHandler = () => {
+        // Ignore also inertia
+        let stillMoving = performance.now() - lastCameraChange < 100;
+        if (!stillMoving) {
+          updateBoundingBox();
+          isWaiting = false;
+        } else {
+          // If the mouse is still down, wait a little more
+          setTimeout(waitingHandler, 100);
+        }
+      };
+      setTimeout(waitingHandler, 100); // Wait for the camera to stop moving
+    });
   });
 });
 
diff --git a/src/viewer/ModelViewerWrapper.vue b/src/viewer/ModelViewerWrapper.vue
index 7595705..454a8f1 100644
--- a/src/viewer/ModelViewerWrapper.vue
+++ b/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>