6442 "Zoom to fit" when kcl file is shared on web (#6619)

* submit zoom_to_fit when kcl file is created on web

* add test for zoom to fit on shared model on web - only works with a hack so far

* resolve circular deps

* fix Zoom to fit to shared model on web, test still not passing without timeout

* Clean up zoom_to_fit for web sharing, stabilize test

* fmt

* small import refactor

* fmt

* Make Zoom to fit test web-only

e2e/playwright/command-bar-tests.spec.ts

@@ -4,6 +4,7 @@ import * as fsp from 'fs/promises'
 
 import { executorInputPath, getUtils } from '@e2e/playwright/test-utils'
 import { expect, test } from '@e2e/playwright/zoo-test'
+import { expectPixelColor } from '@e2e/playwright/fixtures/sceneFixture'
 
 test.describe('Command bar tests', () => {
   test('Extrude from command bar selects extrude line after', async ({
@@ -495,6 +496,42 @@ test.describe('Command bar tests', () => {
     })
   })
 
+  test(`Zoom to fit to shared model on web`, async ({ page, scene }) => {
+    if (process.env.PLATFORM !== 'web') {
+      // This test is web-only
+      return
+    }
+    await test.step(`Prepare and navigate to home page with query params`, async () => {
+      // a quad in the top left corner of the XZ plane (which is out of the current view)
+      const code = `sketch001 = startSketchOn(XZ)
+profile001 = startProfile(sketch001, at = [-484.34, 484.95])
+  |> yLine(length = -69.1)
+  |> xLine(length = 66.84)
+  |> yLine(length = 71.37)
+  |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
+  |> close()
+`
+      const targetURL = `?create-file&name=test&units=mm&code=${encodeURIComponent(btoa(code))}&ask-open-desktop`
+      await page.goto(page.url() + targetURL)
+      expect(page.url()).toContain(targetURL)
+    })
+
+    await test.step(`Submit the command`, async () => {
+      await page.getByTestId('continue-to-web-app-button').click()
+
+      await scene.connectionEstablished()
+
+      // This makes SystemIOMachineActors.createKCLFile run after EngineStream/firstPlay
+      await page.waitForTimeout(3000)
+
+      await page.getByTestId('command-bar-submit').click()
+    })
+
+    await test.step(`Ensure we created the project and are in the modeling scene`, async () => {
+      await expectPixelColor(page, [252, 252, 252], { x: 600, y: 260 }, 8)
+    })
+  })
+
   test(`Can add and edit a named parameter or constant`, async ({
     page,
     homePage,

src/components/OpenInDesktopAppHandler.tsx

@@ -116,6 +116,7 @@ export const OpenInDesktopAppHandler = (props: React.PropsWithChildren) => {
             className={buttonClasses + ' -order-1 !text-base'}
             onClick={continueToWebApp}
             iconStart={{ icon: 'arrowLeft' }}
+            data-testid="continue-to-web-app-button"
           >
             Continue to web app
           </ActionButton>

src/machines/systemIO/systemIOMachineWeb.ts

@@ -7,6 +7,7 @@ import { readLocalStorageProjectSettingsFile } from '@src/lib/settings/settingsU
 import { err } from '@src/lib/trap'
 import { DEFAULT_DEFAULT_LENGTH_UNIT } from '@src/lib/constants'
 import type { AppMachineContext } from '@src/lib/types'
+import { engineStreamZoomToFit } from '@src/lib/utils'
 
 export const systemIOMachineWeb = systemIOMachine.provide({
   actors: {
@@ -40,6 +41,22 @@ export const systemIOMachineWeb = systemIOMachine.provide({
         input.rootContext.codeManager.updateCodeStateEditor(codeToWrite)
         await input.rootContext.codeManager.writeToFile()
         await input.rootContext.kclManager.executeCode()
+
+        // Needed for zoom_to_fit to work until #6545 is fixed:
+        // https://github.com/KittyCAD/modeling-app/issues/6545
+        await input.rootContext.kclManager.hidePlanes()
+
+        // Alternatively, this makes it work too:
+        // await engineViewIsometricWithGeometryPresent({
+        //   engineCommandManager: input.rootContext.engineCommandManager,
+        //   padding: 0.2,
+        // })
+
+        await engineStreamZoomToFit({
+          engineCommandManager: input.rootContext.engineCommandManager,
+          padding: 0.2,
+        })
+
         return {
           message: 'File overwritten successfully',
           fileName: input.requestedFileNameWithExtension,