Add offset plane point-and-click user flow (#4552)

* Add a code mod for offset plane

* Add support for default plane selections to our `otherSelections` object

* Make availableVars work without a selection range
(because default planes don't have one)

* Make default planes selectable in cmdbar even if AST is empty

* Add offset plane command and activate in toolbar

* Avoid unnecessary error when sketching on offset plane by returning early

* Add supporting test features for offset plane E2E test

* Add WIP E2E test for offset plane
Struggling to get local electron test suite running properly

* Typos

* Lints

* Fix test by making it a web-based one:
I couldn't use the cmdBar fixture with an electron test for some reason.

* Update src/lib/commandBarConfigs/modelingCommandConfig.ts

* Update src/machines/modelingMachine.ts

* Revert changes to `homePageFixture`, as they were unused

* @Irev-Dev feedback: convert action to actor, fix machine layout

* Update plane icon to be not dashed, follow conventions closer

e2e/playwright/fixtures/cmdBarFixture.ts

@@ -35,7 +35,7 @@ export class CmdBarFixture {
   }
 
   private _serialiseCmdBar = async (): Promise<CmdBarSerialised> => {
-    const reviewForm = await this.page.locator('#review-form')
+    const reviewForm = this.page.locator('#review-form')
     const getHeaderArgs = async () => {
       const inputs = await this.page.getByTestId('cmd-bar-input-tab').all()
       const entries = await Promise.all(

e2e/playwright/fixtures/toolbarFixture.ts

@@ -6,6 +6,7 @@ export class ToolbarFixture {
   public page: Page
 
   extrudeButton!: Locator
+  offsetPlaneButton!: Locator
   startSketchBtn!: Locator
   lineBtn!: Locator
   rectangleBtn!: Locator
@@ -25,6 +26,7 @@ export class ToolbarFixture {
   reConstruct = (page: Page) => {
     this.page = page
     this.extrudeButton = page.getByTestId('extrude')
+    this.offsetPlaneButton = page.getByTestId('plane-offset')
     this.startSketchBtn = page.getByTestId('sketch')
     this.lineBtn = page.getByTestId('line')
     this.rectangleBtn = page.getByTestId('corner-rectangle')

e2e/playwright/point-click.spec.ts

@@ -551,3 +551,53 @@ test(`Verify axis, origin, and horizontal snapping`, async ({
     )
   })
 })
+
+test(`Offset plane point-and-click`, async ({
+  app,
+  scene,
+  editor,
+  toolbar,
+  cmdBar,
+}) => {
+  await app.initialise()
+
+  // One dumb hardcoded screen pixel value
+  const testPoint = { x: 700, y: 150 }
+  const [clickOnXzPlane] = scene.makeMouseHelpers(testPoint.x, testPoint.y)
+  const expectedOutput = `plane001 = offsetPlane('XZ', 5)`
+
+  await test.step(`Look for the blue of the XZ plane`, async () => {
+    await scene.expectPixelColor([50, 51, 96], testPoint, 15)
+  })
+  await test.step(`Go through the command bar flow`, async () => {
+    await toolbar.offsetPlaneButton.click()
+    await cmdBar.expectState({
+      stage: 'arguments',
+      currentArgKey: 'plane',
+      currentArgValue: '',
+      headerArguments: { Plane: '', Distance: '' },
+      highlightedHeaderArg: 'plane',
+      commandName: 'Offset plane',
+    })
+    await clickOnXzPlane()
+    await cmdBar.expectState({
+      stage: 'arguments',
+      currentArgKey: 'distance',
+      currentArgValue: '5',
+      headerArguments: { Plane: '1 plane', Distance: '' },
+      highlightedHeaderArg: 'distance',
+      commandName: 'Offset plane',
+    })
+    await cmdBar.progressCmdBar()
+  })
+
+  await test.step(`Confirm code is added to the editor, scene has changed`, async () => {
+    await editor.expectEditor.toContain(expectedOutput)
+    await editor.expectState({
+      diagnostics: [],
+      activeLines: [expectedOutput],
+      highlightedCode: '',
+    })
+    await scene.expectPixelColor([74, 74, 74], testPoint, 15)
+  })
+})