feat(fe): models panel - zoom to fit on double click of model or tree item

feat(fe): models panel - zoom to fit on double click of model or tree item

packages/frontend-2/components/viewer/models/Card.vue

@@ -10,6 +10,7 @@
         @focusin="highlightObject"
         @focusout="unhighlightObject"
         @click="selectObject"
+        @dblclick="zoomToModel"
         @keydown.enter="selectObject"
       >
         <ViewerExpansionTriangle
@@ -86,7 +87,8 @@ import type { Get } from 'type-fest'
 import type { LayoutMenuItem } from '~~/lib/layout/helpers/components'
 import {
   useHighlightedObjectsUtilities,
-  useFilterUtilities
+  useFilterUtilities,
+  useCameraUtilities
 } from '~~/lib/viewer/composables/ui'
 import {
   useInjectedViewerState,
@@ -116,6 +118,7 @@ const props = defineProps<{
 const { highlightObjects, unhighlightObjects } = useHighlightedObjectsUtilities()
 const { hideObjects, showObjects, isolateObjects, unIsolateObjects } =
   useFilterUtilities()
+const { zoom } = useCameraUtilities()
 const { items } = useInjectedViewerRequestedResources()
 const { resourceItems } = useInjectedViewerLoadedResources()
 const {
@@ -290,6 +293,12 @@ const selectObject = () => {
   }
 }
 
+const zoomToModel = () => {
+  if (modelObjectIds.value.length > 0) {
+    zoom(modelObjectIds.value)
+  }
+}
+
 const removeModel = async (modelId: string) => {
   const builder = SpeckleViewer.ViewerRoute.resourceBuilder()
   for (const loadedResource of resourceItems.value) {

packages/frontend-2/components/viewer/models/VirtualTreeItem.vue

@@ -5,6 +5,7 @@
       class="group flex items-center w-full p-1 pr-2 cursor-pointer text-left justify-between"
       :class="[getItemBackgroundClass(), getItemOpacityClass()]"
       @click="handleItemClick($event)"
+      @dblclick="handleItemDoubleClick()"
       @mouseenter="handleItemMouseEnter()"
       @mouseleave="handleItemMouseLeave()"
       @focusin="handleItemMouseEnter()"
@@ -65,7 +66,8 @@ import {
 import {
   useSelectionUtilities,
   useFilterUtilities,
-  useHighlightedObjectsUtilities
+  useHighlightedObjectsUtilities,
+  useCameraUtilities
 } from '~~/lib/viewer/composables/ui'
 import { useInjectedViewerState } from '~~/lib/viewer/composables/setup'
 import type { UnifiedVirtualItem } from '~~/lib/viewer/composables/tree'
@@ -83,6 +85,7 @@ const { objects: selectedObjects } = useSelectionUtilities()
 const { hideObjects, showObjects, isolateObjects, unIsolateObjects } =
   useFilterUtilities()
 const { highlightObjects, unhighlightObjects } = useHighlightedObjectsUtilities()
+const { zoom } = useCameraUtilities()
 
 const {
   viewer: {
@@ -146,6 +149,11 @@ const handleItemClick = (event: MouseEvent | KeyboardEvent) => {
   emit('item-click', props.item, event)
 }
 
+const handleItemDoubleClick = () => {
+  if (!rawSpeckleData.value?.id) return
+  zoom([rawSpeckleData.value.id])
+}
+
 const handleItemMouseEnter = () => {
   if (!rawSpeckleData.value) return
   highlightObjects(getTargetObjectIds(rawSpeckleData.value))