fix(fe2): preview 360 images occasionally not displayed (by Easoncan) (#2494)

packages/frontend-2/components/preview/Image.vue

@@ -6,6 +6,13 @@
     class="relative w-full h-full"
     @mouseenter="hovered = true"
     @mouseleave="hovered = false"
+    @mousemove="(e: MouseEvent) => calculatePanoramaStyle(e)"
+    @touchmove="(e: TouchEvent) =>
+      calculatePanoramaStyle({
+        target: e.target,
+        clientX: e.touches[0].clientX,
+        clientY: e.touches[0].clientY
+      })"
   >
     <Transition
       enter-from-class="opacity-0"
@@ -58,13 +65,6 @@
           width: '100%',
           height: '100%'
         }"
-        @mousemove="(e: MouseEvent) => calculatePanoramaStyle(e)"
-        @touchmove="(e:TouchEvent) =>
-          calculatePanoramaStyle({
-            target: e.target,
-            clientX: e.touches[0].clientX,
-            clientY: e.touches[0].clientY
-          } as MouseEvent)"
       />
     </Transition>
     <Transition
@@ -85,6 +85,8 @@ import { type Nullable } from '@speckle/shared'
 import { useElementVisibility, useResizeObserver } from '@vueuse/core'
 import { usePreviewImageBlob } from '~~/lib/projects/composables/previewImage'
 
+type PanoramaStyleMouseOrTouchEvent = Pick<MouseEvent, 'target' | 'clientX' | 'clientY'>
+
 const props = withDefaults(
   defineProps<{
     previewUrl: string
@@ -117,17 +119,22 @@ const mainPreviewClasses = computed(
   () => 'w-full h-full bg-contain bg-no-repeat bg-center'
 )
 
-let parentWidth = 1
-let parentHeight = 1
+const parentWidth = ref(0)
+const parentHeight = ref(0)
 const setParentDimensions = () => {
-  parentWidth = parent.value?.getBoundingClientRect().width as number
-  parentHeight = parent.value?.getBoundingClientRect().height as number
+  const { width = 0, height = 0 } = parent.value?.getBoundingClientRect() || {}
+  parentWidth.value = width
+  parentHeight.value = height
 }
+
 if (import.meta.client) useResizeObserver(document.body, () => setParentDimensions())
 
 const positionMagic = ref(0)
-const calculatePanoramaStyle = (e: MouseEvent) => {
+const latestMouseEvent = ref<PanoramaStyleMouseOrTouchEvent>()
+const calculatePanoramaStyle = (e: PanoramaStyleMouseOrTouchEvent) => {
+  latestMouseEvent.value = e
   const rect = panorama.value?.getBoundingClientRect()
+  if (parentHeight.value === 0) setParentDimensions()
   if (!rect) return
 
   const x = e.clientX - rect.left
@@ -135,9 +142,9 @@ const calculatePanoramaStyle = (e: MouseEvent) => {
   let index = Math.abs(24 - Math.round(x / step))
   if (index >= 24) index = 24 - 1
 
-  const scaleFactor = parentHeight / 400
+  const scaleFactor = parentHeight.value / 400
   const actualWidth = scaleFactor * 700
-  const widthDiff = (parentWidth - actualWidth) * 0.5
+  const widthDiff = (parentWidth.value - actualWidth) * 0.5
   positionMagic.value = -(actualWidth * (2 * index + 1) - widthDiff)
 }
 
@@ -158,6 +165,15 @@ watch(hovered, (newVal) => {
     shouldLoadPanorama.value = true
 })
 
+watch(
+  () => unref(panoramaPreviewUrl),
+  () => {
+    if (latestMouseEvent.value) {
+      calculatePanoramaStyle(latestMouseEvent.value)
+    }
+  }
+)
+
 if (import.meta.client) {
   // Trigger transitions when preview image changes
   watch(finalPreviewUrl, (newVal, oldVal) => {