fix(fe-2): invalid comment placement when placed inside isolated obj (#1640)

* fix(fe-2): weird comment positioning

* feat: viewer dev helpers

packages/frontend-2/lib/viewer/composables/setup/comments.ts

@@ -24,7 +24,6 @@ export function setupViewerCommentBubbles(
     const ot = Object.values(commentThreads.value).find(
       (t) => t.id === focusedThreadId.value
     )
-    console.log('ot', ot, commentThreads.value, focusedThreadId.value)
     return ot
   })
 

packages/frontend-2/lib/viewer/composables/setup/dev.ts

@@ -0,0 +1,33 @@
+import { ViewerEvent } from '@speckle/viewer'
+import { useInjectedViewerState } from '~~/lib/viewer/composables/setup'
+import { useViewerEventListener } from '~~/lib/viewer/composables/viewer'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function useDebugViewerEvents() {
+  for (const [key, val] of Object.entries(ViewerEvent)) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    useViewerEventListener(val, (...args) => console.log(key, ...args))
+  }
+}
+
+function useDebugViewer() {
+  const state = useInjectedViewerState()
+  const {
+    viewer: { instance }
+  } = state
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  window.VIEWER = instance
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  window.VIEWER_STATE = () => ({ ...state })
+}
+
+export function setupDebugMode() {
+  if (process.server) return
+  if (!process.dev) return
+
+  // useDebugViewerEvents()
+  useDebugViewer()
+}

packages/frontend-2/lib/viewer/composables/setup/postSetup.ts

@@ -46,6 +46,7 @@ import { areVectorsLooselyEqual } from '~~/lib/viewer/helpers/three'
 import { Nullable } from '@speckle/shared'
 import { useCameraUtilities } from '~~/lib/viewer/composables/ui'
 import { watchTriggerable } from '@vueuse/core'
+import { setupDebugMode } from '~~/lib/viewer/composables/setup/dev'
 
 function useViewerIsBusyEventHandler() {
   const state = useInjectedViewerState()
@@ -696,23 +697,6 @@ function useDiffingIntegration() {
   })
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function useDebugViewerEvents() {
-  if (process.server) return
-  const {
-    viewer: { instance }
-  } = useInjectedViewerState()
-
-  for (const [key, val] of Object.entries(ViewerEvent)) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    useViewerEventListener(val, (...args) => console.log(key, ...args))
-  }
-
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  window.VIEWER = instance
-}
-
 export function useViewerPostSetup() {
   if (process.server) return
   useViewerObjectAutoLoading()
@@ -727,7 +711,5 @@ export function useViewerPostSetup() {
   useLightConfigIntegration()
   useExplodeFactorIntegration()
   useDiffingIntegration()
-
-  // test
-  // useDebugViewerEvents()
+  setupDebugMode()
 }

packages/frontend-2/lib/viewer/composables/setup/selection.ts

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { Nullable } from '@speckle/shared'
-import { SelectionEvent } from '@speckle/viewer'
+
 import { SpeckleObject } from '~~/lib/common/helpers/sceneExplorer'
 import { useMixpanel } from '~~/lib/core/composables/mp'
 import { useInjectedViewerState } from '~~/lib/viewer/composables/setup'
@@ -12,11 +11,11 @@ function useCollectSelection() {
     ui: { selection }
   } = useInjectedViewerState()
 
-  const selectionCallback = (event: Nullable<SelectionEvent>) => {
-    if (!event) return (selection.value = null) // reset selection location
-
-    const firstHit = event.hits[0]
-    selection.value = firstHit.point
+  const selectionCallback: Parameters<
+    typeof useSelectionEvents
+  >[0]['singleClickCallback'] = (_event, { firstVisibleSelectionHit }) => {
+    if (!firstVisibleSelectionHit) return (selection.value = null) // reset selection location
+    selection.value = firstVisibleSelectionHit.point
   }
   useSelectionEvents({
     singleClickCallback: selectionCallback,

packages/frontend-2/plugins/dev.ts

@@ -0,0 +1,6 @@
+export default defineNuxtPlugin(() => {
+  if (!process.dev) return
+  if (!process.client) return
+
+  console.debug('🚧 Running FE2 in dev mode, extra debugging tools may be available...')
+})