Add menu item and hotkey to center view on current selection (#4068)

* tentatively adding this

* Update src/components/ModelingMachineProvider.tsx

Co-authored-by: Jonathan Tran <jonnytran@gmail.com>

* Show shortcut in UI dialog

* Move command into modelingMachine action

* Add a menu item to the view menu

* Switch gizmo tests to use "deprecated" test setup in prep for new fixture-based test

* Add e2e test for center view to selection

* Bump @kittycad/lib to latest and fix tsc

* Bump @kittycad/lib to v2.0.7 to fix electron building

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)

---------

Co-authored-by: Jonathan Tran <jonnytran@gmail.com>
Co-authored-by: Frank Noirot <frank@kittycad.io>
Co-authored-by: 49fl <ircsurfer33@gmail.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Frank Noirot <frank@zoo.dev>

src/components/Gizmo.tsx

@@ -28,6 +28,7 @@ import {
 import { Popover } from '@headlessui/react'
 import { CustomIcon } from './CustomIcon'
 import { reportRejection } from 'lib/trap'
+import { useModelingContext } from 'hooks/useModelingContext'
 
 const CANVAS_SIZE = 80
 const FRUSTUM_SIZE = 0.5
@@ -62,6 +63,7 @@ export default function Gizmo() {
   const raycasterIntersect = useRef<Intersection<Object3D> | null>(null)
   const cameraPassiveUpdateTimer = useRef(0)
   const raycasterPassiveUpdateTimer = useRef(0)
+  const { send: modelingSend } = useModelingContext()
   const menuItems = useMemo(
     () => [
       ...Object.entries(axisNamesSemantic).map(([axisName, axisSemantic]) => (
@@ -76,6 +78,7 @@ export default function Gizmo() {
           {axisSemantic} view
         </ContextMenuItem>
       )),
+      <ContextMenuDivider />,
       <ContextMenuItem
         onClick={() => {
           sceneInfra.camControls.resetCameraPosition().catch(reportRejection)
@@ -83,6 +86,13 @@ export default function Gizmo() {
       >
         Reset view
       </ContextMenuItem>,
+      <ContextMenuItem
+        onClick={() => {
+          modelingSend({ type: 'Center camera on selection' })
+        }}
+      >
+        Center view on selection
+      </ContextMenuItem>,
       <ContextMenuDivider />,
       <ContextMenuItemRefresh />,
     ],

src/components/ModelingMachineProvider.tsx

@@ -83,6 +83,7 @@ import {
 } from 'lang/std/engineConnection'
 import { submitAndAwaitTextToKcl } from 'lib/textToCad'
 import { useFileContext } from 'hooks/useFileContext'
+import { uuidv4 } from 'lib/utils'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -243,6 +244,17 @@ export const ModelingMachineProvider = ({
             return {}
           },
         }),
+        'Center camera on selection': () => {
+          engineCommandManager
+            .sendSceneCommand({
+              type: 'modeling_cmd_req',
+              cmd_id: uuidv4(),
+              cmd: {
+                type: 'default_camera_center_to_selection',
+              },
+            })
+            .catch(reportRejection)
+        },
         'Set sketchDetails': assign(({ context: { sketchDetails }, event }) => {
           if (event.type !== 'Delete segment') return {}
           if (!sketchDetails) return {}
@@ -1037,6 +1049,11 @@ export const ModelingMachineProvider = ({
     modelingSend({ type: 'Delete selection' })
   })
 
+  // Allow ctrl+alt+c to center to selection
+  useHotkeys(['mod + alt + c'], () => {
+    modelingSend({ type: 'Center camera on selection' })
+  })
+
   useStateMachineCommands({
     machineId: 'modeling',
     state: modelingState,