Merge remote-tracking branch 'origin' into kurt-multi-profile-again

* Add artifact ID to KCL values that have them

* Fix tests to use new fields

* Update output after adding artifact IDs

* Update docs

docs/kcl/types/ArtifactId.md

@@ -0,0 +1,15 @@
+---
+title: "ArtifactId"
+excerpt: ""
+layout: manual
+---
+
+
+**Type:** `string` (`uuid`)
+
+
+
+
+
+
+

docs/kcl/types/Face.md

@@ -17,6 +17,7 @@ A face.
 | Property | Type | Description | Required |
 |----------|------|-------------|----------|
 | `id` |`string`| The id of the face. | No |
+| `artifactId` |[`ArtifactId`](/docs/kcl/types/ArtifactId)| The artifact ID. | No |
 | `value` |`string`| The tag of the face. | No |
 | `xAxis` |[`Point3d`](/docs/kcl/types/Point3d)| What should the face’s X axis be? | No |
 | `yAxis` |[`Point3d`](/docs/kcl/types/Point3d)| What should the face’s Y axis be? | No |

docs/kcl/types/Helix.md

@@ -17,6 +17,7 @@ A helix.
 | Property | Type | Description | Required |
 |----------|------|-------------|----------|
 | `value` |`string`| The id of the helix. | No |
+| `artifactId` |[`ArtifactId`](/docs/kcl/types/ArtifactId)| The artifact ID. | No |
 | `revolutions` |`number`| Number of revolutions. | No |
 | `angleStart` |`number`| Start angle (in degrees). | No |
 | `ccw` |`boolean`| Is the helix rotation counter clockwise? | No |

docs/kcl/types/HelixData.md

@@ -1,26 +0,0 @@
----
-title: "HelixData"
-excerpt: "Data for a helix."
-layout: manual
----
-
-Data for a helix.
-
-**Type:** `object`
-
-
-
-
-
-## Properties
-
-| Property | Type | Description | Required |
-|----------|------|-------------|----------|
-| `revolutions` |`number`| Number of revolutions. | No |
-| `angleStart` |`number`| Start angle (in degrees). | No |
-| `ccw` |`boolean`| Is the helix rotation counter clockwise? The default is `false`. | No |
-| `length` |`number`| Length of the helix. This is not necessary if the helix is created around an edge. If not given the length of the edge is used. | No |
-| `radius` |`number`| Radius of the helix. | No |
-| `axis` |[`Axis3dOrEdgeReference`](/docs/kcl/types/Axis3dOrEdgeReference)| Axis to use as mirror. | No |
-
-

docs/kcl/types/HelixValue.md

@@ -17,6 +17,7 @@ A helix.
 | Property | Type | Description | Required |
 |----------|------|-------------|----------|
 | `value` |`string`| The id of the helix. | No |
+| `artifactId` |[`ArtifactId`](/docs/kcl/types/ArtifactId)| The artifact ID. | No |
 | `revolutions` |`number`| Number of revolutions. | No |
 | `angleStart` |`number`| Start angle (in degrees). | No |
 | `ccw` |`boolean`| Is the helix rotation counter clockwise? | No |

docs/kcl/types/Plane.md

@@ -17,6 +17,7 @@ A plane.
 | Property | Type | Description | Required |
 |----------|------|-------------|----------|
 | `id` |`string`| The id of the plane. | No |
+| `artifactId` |[`ArtifactId`](/docs/kcl/types/ArtifactId)| The artifact ID. | No |
 | `value` |[`PlaneType`](/docs/kcl/types/PlaneType)| A plane. | No |
 | `origin` |[`Point3d`](/docs/kcl/types/Point3d)| Origin of the plane. | No |
 | `xAxis` |[`Point3d`](/docs/kcl/types/Point3d)| What should the plane’s X axis be? | No |

docs/kcl/types/Sketch.md

@@ -21,6 +21,7 @@ A sketch is a collection of paths.
 | `on` |[`SketchSurface`](/docs/kcl/types/SketchSurface)| What the sketch is on (can be a plane or a face). | No |
 | `start` |[`BasePath`](/docs/kcl/types/BasePath)| The starting path. | No |
 | `tags` |`object`| Tag identifiers that have been declared in this sketch. | No |
+| `artifactId` |[`ArtifactId`](/docs/kcl/types/ArtifactId)| The original id of the sketch. This stays the same even if the sketch is is sketched on face etc. | No |
 | `units` |[`UnitLen`](/docs/kcl/types/UnitLen)| A sketch is a collection of paths. | No |
 | `__meta` |`[` [`Metadata`](/docs/kcl/types/Metadata) `]`| Metadata. | No |
 

docs/kcl/types/SketchSet.md

@@ -30,6 +30,7 @@ A sketch is a collection of paths.
 | `on` |[`SketchSurface`](/docs/kcl/types/SketchSurface)| What the sketch is on (can be a plane or a face). | No |
 | `start` |[`BasePath`](/docs/kcl/types/BasePath)| The starting path. | No |
 | `tags` |`object`| Tag identifiers that have been declared in this sketch. | No |
+| `artifactId` |[`ArtifactId`](/docs/kcl/types/ArtifactId)| The original id of the sketch. This stays the same even if the sketch is is sketched on face etc. | No |
 | `units` |[`UnitLen`](/docs/kcl/types/UnitLen)| A sketch or a group of sketches. | No |
 | `__meta` |`[` [`Metadata`](/docs/kcl/types/Metadata) `]`| Metadata. | No |
 

docs/kcl/types/SketchSurface.md

@@ -26,6 +26,7 @@ A plane.
 |----------|------|-------------|----------|
 | `type` |enum: `plane`|  | No |
 | `id` |`string`| The id of the plane. | No |
+| `artifactId` |[`ArtifactId`](/docs/kcl/types/ArtifactId)| The artifact ID. | No |
 | `value` |[`PlaneType`](/docs/kcl/types/PlaneType)| A sketch type. | No |
 | `origin` |[`Point3d`](/docs/kcl/types/Point3d)| Origin of the plane. | No |
 | `xAxis` |[`Point3d`](/docs/kcl/types/Point3d)| What should the plane’s X axis be? | No |
@@ -50,6 +51,7 @@ A face.
 |----------|------|-------------|----------|
 | `type` |enum: `face`|  | No |
 | `id` |`string`| The id of the face. | No |
+| `artifactId` |[`ArtifactId`](/docs/kcl/types/ArtifactId)| The artifact ID. | No |
 | `value` |`string`| The tag of the face. | No |
 | `xAxis` |[`Point3d`](/docs/kcl/types/Point3d)| What should the face’s X axis be? | No |
 | `yAxis` |[`Point3d`](/docs/kcl/types/Point3d)| What should the face’s Y axis be? | No |

docs/kcl/types/Solid.md

@@ -17,6 +17,7 @@ An solid is a collection of extrude surfaces.
 | Property | Type | Description | Required |
 |----------|------|-------------|----------|
 | `id` |`string`| The id of the solid. | No |
+| `artifactId` |[`ArtifactId`](/docs/kcl/types/ArtifactId)| The artifact ID of the solid.  Unlike `id`, this doesn't change. | No |
 | `value` |`[` [`ExtrudeSurface`](/docs/kcl/types/ExtrudeSurface) `]`| The extrude surfaces. | No |
 | `sketch` |[`Sketch`](/docs/kcl/types/Sketch)| The sketch. | No |
 | `height` |`number`| The height of the solid. | No |

docs/kcl/types/SolidSet.md

@@ -26,6 +26,7 @@ An solid is a collection of extrude surfaces.
 |----------|------|-------------|----------|
 | `type` |enum: `solid`|  | No |
 | `id` |`string`| The id of the solid. | No |
+| `artifactId` |[`ArtifactId`](/docs/kcl/types/ArtifactId)| The artifact ID of the solid.  Unlike `id`, this doesn't change. | No |
 | `value` |`[` [`ExtrudeSurface`](/docs/kcl/types/ExtrudeSurface) `]`| The extrude surfaces. | No |
 | `sketch` |[`Sketch`](/docs/kcl/types/Sketch)| The sketch. | No |
 | `height` |`number`| The height of the solid. | No |

e2e/playwright/basic-sketch.spec.ts

@@ -54,23 +54,26 @@ async function doBasicSketch(
   const startXPx = 600
   await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
   if (openPanes.includes('code')) {
-    await expect(u.codeLocator).toHaveText(`sketch001 = startSketchOn('XZ')
+    await expect(u.codeLocator).toContainText(
-  |> startProfileAt(${commonPoints.startAt}, %)`)
+      `sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${commonPoints.startAt}, sketch001)`
+    )
   }
   await page.waitForTimeout(500)
   await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
   await page.waitForTimeout(500)
 
   if (openPanes.includes('code')) {
-    await expect(u.codeLocator).toHaveText(`sketch001 = startSketchOn('XZ')
+    await expect(u.codeLocator)
-  |> startProfileAt(${commonPoints.startAt}, %)
+      .toHaveText(`sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${commonPoints.startAt}, sketch001)
   |> xLine(${commonPoints.num1}, %)`)
   }
   await page.waitForTimeout(500)
   await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 20)
   if (openPanes.includes('code')) {
-    await expect(u.codeLocator).toHaveText(`sketch001 = startSketchOn('XZ')
+    await expect(u.codeLocator)
-  |> startProfileAt(${commonPoints.startAt}, %)
+      .toHaveText(`sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${
+      commonPoints.startAt
+    }, sketch001)
   |> xLine(${commonPoints.num1}, %)
   |> yLine(${commonPoints.num1 + 0.01}, %)`)
   } else {
@@ -79,8 +82,10 @@ async function doBasicSketch(
   await page.waitForTimeout(200)
   await page.mouse.click(startXPx, 500 - PUR * 20)
   if (openPanes.includes('code')) {
-    await expect(u.codeLocator).toHaveText(`sketch001 = startSketchOn('XZ')
+    await expect(u.codeLocator)
-  |> startProfileAt(${commonPoints.startAt}, %)
+      .toHaveText(`sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${
+      commonPoints.startAt
+    }, sketch001)
   |> xLine(${commonPoints.num1}, %)
   |> yLine(${commonPoints.num1 + 0.01}, %)
   |> xLine(${commonPoints.num2 * -1}, %)`)
@@ -137,8 +142,10 @@ async function doBasicSketch(
 
   // Open the code pane.
   await u.openKclCodePanel()
-  await expect(u.codeLocator).toHaveText(`sketch001 = startSketchOn('XZ')
+  await expect(u.codeLocator)
-  |> startProfileAt(${commonPoints.startAt}, %)
+    .toHaveText(`sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${
+    commonPoints.startAt
+  }, sketch001)
   |> xLine(${commonPoints.num1}, %, $seg01)
   |> yLine(${commonPoints.num1 + 0.01}, %)
   |> xLine(-segLen(seg01), %)`)

e2e/playwright/can-create-sketches-on-all-planes-and-their-back-sides.spec.ts

@@ -41,8 +41,7 @@ test.describe(
         },
       }
 
-      const code = `sketch001 = startSketchOn('${plane}')
+      const code = `sketch001 = startSketchOn('${plane}')profile001 = startProfileAt([0.9, -1.22], sketch001)`
-    |> startProfileAt([0.9, -1.22], %)`
 
       await u.openDebugPanel()
 

e2e/playwright/code-pane-and-errors.spec.ts

@@ -301,7 +301,7 @@ test(
   }
 )
 
-test(
+test.skip(
   'external change of file contents are reflected in editor',
   { tag: '@electron' },
   async ({ context, page }, testInfo) => {

e2e/playwright/feature-tree-pane.spec.ts

@@ -35,6 +35,30 @@ sketch002 = startSketchOn(plane001)
 extrude001 = extrude(sketch002, length = 10)
 `
 
+const FEAUTRE_TREE_SKETCH_CODE = `sketch001 = startSketchOn('XZ')
+  |> startProfileAt([0, 0], %)
+  |> angledLine([0, 4], %, $rectangleSegmentA001)
+  |> angledLine([
+       segAng(rectangleSegmentA001) - 90,
+       2
+     ], %, $rectangleSegmentB001)
+  |> angledLine([
+       segAng(rectangleSegmentA001),
+       -segLen(rectangleSegmentA001)
+     ], %, $rectangleSegmentC001)
+  |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
+  |> close(%)
+extrude001 = extrude(sketch001, length = 10)
+sketch002 = startSketchOn(extrude001, rectangleSegmentB001)
+  |> circle({
+       center = [-1, 2],
+       radius = .5
+     }, %)
+plane001 = offsetPlane('XZ', -5)
+sketch003 = startSketchOn(plane001)
+  |> circle({ center = [0, 0], radius = 5 }, %)
+`
+
 test.describe('Feature Tree pane', () => {
   test(
     'User can go to definition and go to function definition',
@@ -124,4 +148,267 @@ test.describe('Feature Tree pane', () => {
       })
     }
   )
+
+  test(
+    `User can edit sketch (but not on offset plane yet) from the feature tree`,
+    { tag: '@electron' },
+    async ({ context, homePage, scene, editor, toolbar, page }) => {
+      const unavailableToastMessage = page.getByText(
+        'Editing sketches on faces or offset planes through the feature tree is not yet supported'
+      )
+
+      await context.folderSetupFn(async (dir) => {
+        const bracketDir = join(dir, 'test-sample')
+        await fsp.mkdir(bracketDir, { recursive: true })
+        await fsp.writeFile(
+          join(bracketDir, 'main.kcl'),
+          FEAUTRE_TREE_SKETCH_CODE,
+          'utf-8'
+        )
+      })
+
+      await test.step('setup test', async () => {
+        await homePage.expectState({
+          projectCards: [
+            {
+              title: 'test-sample',
+              fileCount: 1,
+            },
+          ],
+          sortBy: 'last-modified-desc',
+        })
+        await homePage.openProject('test-sample')
+        await scene.waitForExecutionDone()
+        await toolbar.openFeatureTreePane()
+      })
+
+      await test.step('On a default plane should work', async () => {
+        await (await toolbar.getFeatureTreeOperation('Sketch', 0)).dblclick()
+        await expect(
+          toolbar.exitSketchBtn,
+          'We should be in sketch mode now'
+        ).toBeVisible()
+        await editor.expectState({
+          highlightedCode: '',
+          diagnostics: [],
+          activeLines: ["sketch001 = startSketchOn('XZ')"],
+        })
+        await toolbar.exitSketchBtn.click()
+      })
+
+      await test.step('On an extrude face should *not* work', async () => {
+        // Tooltip is getting in the way of clicking, so I'm first closing the pane
+        await toolbar.closeFeatureTreePane()
+        await (await toolbar.getFeatureTreeOperation('Sketch', 1)).dblclick()
+        await expect(
+          unavailableToastMessage,
+          'We should see a toast message about this'
+        ).toBeVisible()
+        await unavailableToastMessage.waitFor({ state: 'detached' })
+        // TODO - turn on once we update the artifactGraph in Rust
+        // to include the proper source location for the extrude face
+        // await expect(
+        //   toolbar.exitSketchBtn,
+        //   'We should be in sketch mode now'
+        // ).toBeVisible()
+        // await editor.expectState({
+        //   highlightedCode: '',
+        //   diagnostics: [],
+        //   activeLines: ['|>circle({center=[-1,2],radius=.5},%)'],
+        // })
+        // await toolbar.exitSketchBtn.click()
+      })
+
+      await test.step('On an offset plane should *not* work', async () => {
+        // Tooltip is getting in the way of clicking, so I'm first closing the pane
+        await toolbar.closeFeatureTreePane()
+        await (await toolbar.getFeatureTreeOperation('Sketch', 2)).dblclick()
+        await editor.expectState({
+          highlightedCode: '',
+          diagnostics: [],
+          activeLines: ['|>circle({center=[0,0],radius=5},%)'],
+        })
+        await expect(
+          toolbar.exitSketchBtn,
+          'We should not be in sketch mode now'
+        ).not.toBeVisible()
+        await expect(
+          page.getByText(
+            'Editing sketches on faces or offset planes through the feature tree is not yet supported'
+          ),
+          'We should see a toast message about this'
+        ).toBeVisible()
+      })
+    }
+  )
+  test(`User can edit an extrude operation from the feature tree`, async ({
+    context,
+    homePage,
+    scene,
+    editor,
+    toolbar,
+    cmdBar,
+    page,
+  }) => {
+    const initialInput = '23'
+    const initialCode = `sketch001 = startSketchOn('XZ')
+      |> circle({ center = [0, 0], radius = 5 }, %)
+      renamedExtrude = extrude(sketch001, length = ${initialInput})`
+    const newConstantName = 'distance001'
+    const expectedCode = `sketch001 = startSketchOn('XZ')
+      |> circle({ center = [0, 0], radius = 5 }, %)
+      ${newConstantName} = 23
+      renamedExtrude = extrude(sketch001, length = ${newConstantName})`
+
+    await context.folderSetupFn(async (dir) => {
+      const testDir = join(dir, 'test-sample')
+      await fsp.mkdir(testDir, { recursive: true })
+      await fsp.writeFile(join(testDir, 'main.kcl'), initialCode, 'utf-8')
+    })
+
+    await test.step('setup test', async () => {
+      await homePage.expectState({
+        projectCards: [
+          {
+            title: 'test-sample',
+            fileCount: 1,
+          },
+        ],
+        sortBy: 'last-modified-desc',
+      })
+      await homePage.openProject('test-sample')
+      await scene.waitForExecutionDone()
+      await toolbar.openFeatureTreePane()
+    })
+
+    await test.step('Double click on the extrude operation', async () => {
+      await (await toolbar.getFeatureTreeOperation('Extrude', 0))
+        .first()
+        .dblclick()
+      await editor.expectState({
+        highlightedCode: '',
+        diagnostics: [],
+        activeLines: [
+          `renamedExtrude = extrude(sketch001, length = ${initialInput})`,
+        ],
+      })
+      await cmdBar.expectState({
+        commandName: 'Extrude',
+        stage: 'arguments',
+        currentArgKey: 'distance',
+        currentArgValue: initialInput,
+        headerArguments: {
+          Selection: '1 face',
+          Distance: initialInput,
+        },
+        highlightedHeaderArg: 'distance',
+      })
+    })
+
+    await test.step('Add a named constant for distance argument and submit', async () => {
+      await expect(cmdBar.currentArgumentInput).toBeVisible()
+      const addVariableButton = page.getByRole('button', {
+        name: 'Create new variable',
+      })
+      await addVariableButton.click()
+      await cmdBar.progressCmdBar()
+      await cmdBar.expectState({
+        stage: 'review',
+        headerArguments: {
+          Selection: '1 face',
+          // The calculated value is shown in the argument summary
+          Distance: initialInput,
+        },
+        commandName: 'Extrude',
+      })
+      await cmdBar.progressCmdBar()
+      await editor.expectState({
+        highlightedCode: '',
+        diagnostics: [],
+        activeLines: [
+          `renamedExtrude = extrude(sketch001, length = ${newConstantName})`,
+        ],
+      })
+      await editor.expectEditor.toContain(expectedCode, {
+        shouldNormalise: true,
+      })
+    })
+  })
+  test(`User can edit an offset plane operation from the feature tree`, async ({
+    context,
+    homePage,
+    scene,
+    editor,
+    toolbar,
+    cmdBar,
+  }) => {
+    const testCode = (value: string) => `p = offsetPlane('XY', ${value})`
+    const initialInput = '10'
+    const initialCode = testCode(initialInput)
+    const newInput = '5 + 10'
+    const expectedCode = testCode(newInput)
+    await context.folderSetupFn(async (dir) => {
+      const testDir = join(dir, 'test-sample')
+      await fsp.mkdir(testDir, { recursive: true })
+      await fsp.writeFile(join(testDir, 'main.kcl'), initialCode, 'utf-8')
+    })
+
+    await test.step('setup test', async () => {
+      await homePage.expectState({
+        projectCards: [
+          {
+            title: 'test-sample',
+            fileCount: 1,
+          },
+        ],
+        sortBy: 'last-modified-desc',
+      })
+      await homePage.openProject('test-sample')
+      await scene.waitForExecutionDone()
+      await toolbar.openFeatureTreePane()
+    })
+
+    await test.step('Double click on the offset plane operation', async () => {
+      await (await toolbar.getFeatureTreeOperation('Offset Plane', 0))
+        .first()
+        .dblclick()
+      await editor.expectState({
+        highlightedCode: '',
+        diagnostics: [],
+        activeLines: [initialCode],
+      })
+      await cmdBar.expectState({
+        commandName: 'Offset plane',
+        stage: 'arguments',
+        currentArgKey: 'distance',
+        currentArgValue: initialInput,
+        headerArguments: {
+          Plane: '1 plane',
+          Distance: initialInput,
+        },
+        highlightedHeaderArg: 'distance',
+      })
+    })
+
+    await test.step('Edit the distance argument and submit', async () => {
+      await expect(cmdBar.currentArgumentInput).toBeVisible()
+      await cmdBar.currentArgumentInput.locator('.cm-content').fill(newInput)
+      await cmdBar.progressCmdBar()
+      await cmdBar.expectState({
+        stage: 'review',
+        headerArguments: {
+          Plane: '1 plane',
+          // We show the calculated value in the argument summary
+          Distance: '15',
+        },
+        commandName: 'Offset plane',
+      })
+      await cmdBar.progressCmdBar()
+      await editor.expectState({
+        highlightedCode: '',
+        diagnostics: [],
+        activeLines: [expectedCode],
+      })
+    })
+  })
 })

e2e/playwright/fixtures/cmdBarFixture.ts

@@ -26,11 +26,18 @@ type CmdBarSerialised =
 export class CmdBarFixture {
   public page: Page
   cmdBarOpenBtn!: Locator
+  cmdBarElement!: Locator
 
   constructor(page: Page) {
     this.page = page
     this.cmdBarOpenBtn = page.getByTestId('command-bar-open-button')
+    this.cmdBarElement = page.getByTestId('command-bar')
   }
+
+  get currentArgumentInput() {
+    return this.page.getByTestId('cmd-bar-arg-value')
+  }
+
   reConstruct = (page: Page) => {
     this.page = page
   }

e2e/playwright/fixtures/sceneFixture.ts

@@ -9,13 +9,15 @@ import {
   sendCustomCmd,
 } from '../test-utils'
 
-type mouseParams = {
+type MouseParams = {
   pixelDiff?: number
+  shouldDbClick?: boolean
+  delay?: number
 }
-type mouseDragToParams = mouseParams & {
+type MouseDragToParams = MouseParams & {
   fromPoint: { x: number; y: number }
 }
-type mouseDragFromParams = mouseParams & {
+type MouseDragFromParams = MouseParams & {
   toPoint: { x: number; y: number }
 }
 
@@ -26,19 +28,22 @@ type SceneSerialised = {
   }
 }
 
-type ClickHandler = (clickParams?: mouseParams) => Promise<void | boolean>
+type ClickHandler = (clickParams?: MouseParams) => Promise<void | boolean>
-type MoveHandler = (moveParams?: mouseParams) => Promise<void | boolean>
+type MoveHandler = (moveParams?: MouseParams) => Promise<void | boolean>
-type DblClickHandler = (clickParams?: mouseParams) => Promise<void | boolean>
+type DblClickHandler = (clickParams?: MouseParams) => Promise<void | boolean>
-type DragToHandler = (dragParams: mouseDragToParams) => Promise<void | boolean>
+type DragToHandler = (dragParams: MouseDragToParams) => Promise<void | boolean>
 type DragFromHandler = (
-  dragParams: mouseDragFromParams
+  dragParams: MouseDragFromParams
 ) => Promise<void | boolean>
 
 export class SceneFixture {
   public page: Page
   public streamWrapper!: Locator
   public loadingIndicator!: Locator
-  private exeIndicator!: Locator
+
+  get exeIndicator() {
+    return this.page.getByTestId('model-state-indicator-execution-done')
+  }
 
   constructor(page: Page) {
     this.page = page
@@ -64,7 +69,6 @@ export class SceneFixture {
   reConstruct = (page: Page) => {
     this.page = page
 
-    this.exeIndicator = page.getByTestId('model-state-indicator-execution-done')
     this.streamWrapper = page.getByTestId('stream')
     this.loadingIndicator = this.streamWrapper.getByTestId('loading')
   }
@@ -75,17 +79,26 @@ export class SceneFixture {
     { steps }: { steps: number } = { steps: 20 }
   ): [ClickHandler, MoveHandler, DblClickHandler] =>
     [
-      (clickParams?: mouseParams) => {
+      (clickParams?: MouseParams) => {
         if (clickParams?.pixelDiff) {
           return doAndWaitForImageDiff(
             this.page,
-            () => this.page.mouse.click(x, y),
+            () =>
+              clickParams?.shouldDbClick
+                ? this.page.mouse.dblclick(x, y, {
+                    delay: clickParams?.delay || 0,
+                  })
+                : this.page.mouse.click(x, y, {
+                    delay: clickParams?.delay || 0,
+                  }),
             clickParams.pixelDiff
           )
         }
-        return this.page.mouse.click(x, y)
+        return clickParams?.shouldDbClick
+          ? this.page.mouse.dblclick(x, y, { delay: clickParams?.delay || 0 })
+          : this.page.mouse.click(x, y, { delay: clickParams?.delay || 0 })
       },
-      (moveParams?: mouseParams) => {
+      (moveParams?: MouseParams) => {
         if (moveParams?.pixelDiff) {
           return doAndWaitForImageDiff(
             this.page,
@@ -95,7 +108,7 @@ export class SceneFixture {
         }
         return this.page.mouse.move(x, y, { steps })
       },
-      (clickParams?: mouseParams) => {
+      (clickParams?: MouseParams) => {
         if (clickParams?.pixelDiff) {
           return doAndWaitForImageDiff(
             this.page,
@@ -112,7 +125,7 @@ export class SceneFixture {
     { steps }: { steps: number } = { steps: 20 }
   ): [DragToHandler, DragFromHandler] =>
     [
-      (dragToParams: mouseDragToParams) => {
+      (dragToParams: MouseDragToParams) => {
         if (dragToParams?.pixelDiff) {
           return doAndWaitForImageDiff(
             this.page,
@@ -129,7 +142,7 @@ export class SceneFixture {
           targetPosition: { x, y },
         })
       },
-      (dragFromParams: mouseDragFromParams) => {
+      (dragFromParams: MouseDragFromParams) => {
         if (dragFromParams?.pixelDiff) {
           return doAndWaitForImageDiff(
             this.page,
@@ -217,7 +230,7 @@ export class SceneFixture {
   }
 
   expectPixelColor = async (
-    colour: [number, number, number],
+    colour: [number, number, number] | [number, number, number][],
     coords: { x: number; y: number },
     diff: number
   ) => {
@@ -239,22 +252,36 @@ export class SceneFixture {
   }
 }
 
+function isColourArray(
+  colour: [number, number, number] | [number, number, number][]
+): colour is [number, number, number][] {
+  return Array.isArray(colour[0])
+}
+
 export async function expectPixelColor(
   page: Page,
-  colour: [number, number, number],
+  colour: [number, number, number] | [number, number, number][],
   coords: { x: number; y: number },
   diff: number
 ) {
   let finalValue = colour
   await expect
-    .poll(async () => {
+    .poll(
-      const pixel = (await getPixelRGBs(page)(coords, 1))[0]
+      async () => {
-      if (!pixel) return null
+        const pixel = (await getPixelRGBs(page)(coords, 1))[0]
-      finalValue = pixel
+        if (!pixel) return null
-      return pixel.every(
+        finalValue = pixel
-        (channel, index) => Math.abs(channel - colour[index]) < diff
+        if (!isColourArray(colour)) {
-      )
+          return pixel.every(
-    })
+            (channel, index) => Math.abs(channel - colour[index]) < diff
+          )
+        }
+        return colour.some((c) =>
+          c.every((channel, index) => Math.abs(pixel[index] - channel) < diff)
+        )
+      },
+      { timeout: 10_000 }
+    )
     .toBeTruthy()
     .catch((cause) => {
       throw new Error(

e2e/playwright/fixtures/toolbarFixture.ts

@@ -22,14 +22,16 @@ export class ToolbarFixture {
   offsetPlaneButton!: Locator
   startSketchBtn!: Locator
   lineBtn!: Locator
+  tangentialArcBtn!: Locator
+  circleBtn!: Locator
   rectangleBtn!: Locator
+  lengthConstraintBtn!: Locator
   exitSketchBtn!: Locator
   editSketchBtn!: Locator
   fileTreeBtn!: Locator
   createFileBtn!: Locator
   fileCreateToast!: Locator
   filePane!: Locator
-  exeIndicator!: Locator
   treeInputField!: Locator
   /** The sidebar button for the Feature Tree pane */
   featureTreeId = 'feature-tree' as const
@@ -52,7 +54,10 @@ export class ToolbarFixture {
     this.offsetPlaneButton = page.getByTestId('plane-offset')
     this.startSketchBtn = page.getByTestId('sketch')
     this.lineBtn = page.getByTestId('line')
+    this.tangentialArcBtn = page.getByTestId('tangential-arc')
+    this.circleBtn = page.getByTestId('circle-center')
     this.rectangleBtn = page.getByTestId('corner-rectangle')
+    this.lengthConstraintBtn = page.getByTestId('constraint-length')
     this.exitSketchBtn = page.getByTestId('sketch-exit')
     this.editSketchBtn = page.getByText('Edit Sketch')
     this.fileTreeBtn = page.locator('[id="files-button-holder"]')
@@ -62,15 +67,16 @@ export class ToolbarFixture {
     this.filePane = page.locator('#files-pane')
     this.featureTreePane = page.locator('#feature-tree-pane')
     this.fileCreateToast = page.getByText('Successfully created')
-    this.exeIndicator = page.getByTestId(
-      'model-state-indicator-receive-reliable'
-    )
   }
 
   get logoLink() {
     return this.page.getByTestId('app-logo')
   }
 
+  get exeIndicator() {
+    return this.page.getByTestId('model-state-indicator-receive-reliable')
+  }
+
   startSketchPlaneSelection = async () =>
     doAndWaitForImageDiff(this.page, () => this.startSketchBtn.click(), 500)
 
@@ -117,6 +123,15 @@ export class ToolbarFixture {
       await expect(this.exeIndicator).toBeVisible({ timeout: 15_000 })
     }
   }
+  selectCenterRectangle = async () => {
+    await this.page
+      .getByRole('button', { name: 'caret down Corner rectangle:' })
+      .click()
+    await expect(
+      this.page.getByTestId('dropdown-center-rectangle')
+    ).toBeVisible()
+    await this.page.getByTestId('dropdown-center-rectangle').click()
+  }
 
   async closePane(paneId: SidebarType) {
     return closePane(this.page, paneId + SIDEBAR_BUTTON_SUFFIX)
@@ -139,7 +154,8 @@ export class ToolbarFixture {
   }
 
   /**
-   * Get a specific operation button from the Feature Tree pane
+   * Get a specific operation button from the Feature Tree pane.
+   * Index is 0-based.
    */
   async getFeatureTreeOperation(operationName: string, operationIndex: number) {
     await this.openFeatureTreePane()

e2e/playwright/onboarding-tests.spec.ts

@@ -437,7 +437,7 @@ test.describe('Onboarding tests', () => {
   )
 })
 
-test.fixme(
+test(
   'Restarting onboarding on desktop takes one attempt',
   {
     appSettings: {
@@ -514,10 +514,7 @@ test.fixme(
       const modelColor: [number, number, number] = [76, 76, 76]
 
       await page.mouse.move(XYPlanePoint.x, XYPlanePoint.y)
-      await expectPixelColor(page, modelColor, XYPlanePoint, 8)
       await tutorialDismissButton.click()
-      // Make sure model still there.
-      await expectPixelColor(page, modelColor, XYPlanePoint, 8)
     })
 
     await test.step('Clear code and restart onboarding from settings', async () => {

e2e/playwright/point-click.spec.ts

@@ -216,18 +216,13 @@ test.describe('Point-and-click tests', { tag: ['@skipWin'] }, () => {
 
         afterChamferSelectSnippet:
           'sketch002 = startSketchOn(extrude001, seg03)',
-        afterRectangle1stClickSnippet: 'startProfileAt([205.96, 254.59], %)',
+        afterRectangle1stClickSnippet:
-        afterRectangle2ndClickSnippet: `angledLine([0, 11.39], %, $rectangleSegmentA002)
+          'startProfileAt([205.96, 254.59], sketch002)',
-    |> angledLine([
+        afterRectangle2ndClickSnippet: `angledLine([0,11.39],%,$rectangleSegmentA002)
-         segAng(rectangleSegmentA002) - 90,
+        |>angledLine([segAng(rectangleSegmentA002)-90,105.26],%)
-         105.26
+        |>angledLine([segAng(rectangleSegmentA002),-segLen(rectangleSegmentA002)],%)
-       ], %, $rectangleSegmentB001)
+        |>line(endAbsolute=[profileStartX(%),profileStartY(%)],%)
-    |> angledLine([
+        |>close(%)`,
-         segAng(rectangleSegmentA002),
-         -segLen(rectangleSegmentA002)
-       ], %, $rectangleSegmentC001)
-    |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
-    |> close()`,
       })
 
       await sketchOnAChamfer({
@@ -248,19 +243,15 @@ test.describe('Point-and-click tests', { tag: ['@skipWin'] }, () => {
 
         afterChamferSelectSnippet:
           'sketch003 = startSketchOn(extrude001, seg04)',
-        afterRectangle1stClickSnippet: 'startProfileAt([-209.64, 255.28], %)',
+        afterRectangle1stClickSnippet:
-        afterRectangle2ndClickSnippet: `angledLine([0, 11.56], %, $rectangleSegmentA003)
+          'startProfileAt([-209.64, 255.28], sketch003)',
-    |> angledLine([
+        afterRectangle2ndClickSnippet: `angledLine([0,11.56],%,$rectangleSegmentA003)
-         segAng(rectangleSegmentA003) - 90,
+        |>angledLine([segAng(rectangleSegmentA003)-90,106.84],%)
-         106.84
+        |>angledLine([segAng(rectangleSegmentA003),-segLen(rectangleSegmentA003)],%)
-       ], %, $rectangleSegmentB002)
+        |>line(endAbsolute=[profileStartX(%),profileStartY(%)],%)
-    |> angledLine([
+        |>close(%)`,
-         segAng(rectangleSegmentA003),
-         -segLen(rectangleSegmentA003)
-       ], %, $rectangleSegmentC002)
-    |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
-    |> close()`,
       })
+
       await sketchOnAChamfer({
         clickCoords: { x: 677, y: 87 },
         cameraPos: { x: -6200, y: 1500, z: 6200 },
@@ -273,19 +264,14 @@ test.describe('Point-and-click tests', { tag: ['@skipWin'] }, () => {
          ]
        }, %)`,
         afterChamferSelectSnippet:
-          'sketch003 = startSketchOn(extrude001, seg04)',
+          'sketch004 = startSketchOn(extrude001, seg05)',
-        afterRectangle1stClickSnippet: 'startProfileAt([75.8, 317.2], %)',
+        afterRectangle1stClickSnippet:
-        afterRectangle2ndClickSnippet: `angledLine([0, 11.56], %, $rectangleSegmentA003)
+          'startProfileAt([82.57, 322.96], sketch004)',
-    |> angledLine([
+        afterRectangle2ndClickSnippet: `angledLine([0,11.16],%,$rectangleSegmentA004)
-         segAng(rectangleSegmentA003) - 90,
+        |>angledLine([segAng(rectangleSegmentA004)-90,103.07],%)
-         106.84
+        |>angledLine([segAng(rectangleSegmentA004),-segLen(rectangleSegmentA004)],%)
-       ], %, $rectangleSegmentB002)
+        |>line(endAbsolute=[profileStartX(%),profileStartY(%)],%)|
-    |> angledLine([
+        >close(%)`,
-         segAng(rectangleSegmentA003),
-         -segLen(rectangleSegmentA003)
-       ], %, $rectangleSegmentC002)
-    |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
-    |> close()`,
       })
       /// last one
       await sketchOnAChamfer({
@@ -298,104 +284,97 @@ test.describe('Point-and-click tests', { tag: ['@skipWin'] }, () => {
        }, %)`,
         afterChamferSelectSnippet:
           'sketch005 = startSketchOn(extrude001, seg06)',
-        afterRectangle1stClickSnippet: 'startProfileAt([-23.43, 19.69], %)',
+        afterRectangle1stClickSnippet:
-        afterRectangle2ndClickSnippet: `angledLine([0, 9.1], %, $rectangleSegmentA005)
+          'startProfileAt([-23.43, 19.69], sketch005)',
-
+        afterRectangle2ndClickSnippet: `angledLine([0,9.1],%,$rectangleSegmentA005)
-    |> angledLine([
+        |>angledLine([segAng(rectangleSegmentA005)-90,84.07],%)
-         segAng(rectangleSegmentA005) - 90,
+        |>angledLine([segAng(rectangleSegmentA005),-segLen(rectangleSegmentA005)],%)
-         84.07
+        |>line(endAbsolute=[profileStartX(%),profileStartY(%)],%)
-       ], %, $rectangleSegmentB004)
+        |>close(%)`,
-    |> angledLine([
-         segAng(rectangleSegmentA005),
-         -segLen(rectangleSegmentA005)
-       ], %, $rectangleSegmentC004)
-    |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
-    |> close()`,
       })
 
       await test.step('verify at the end of the test that final code is what is expected', async () => {
         await editor.expectEditor.toContain(
           `sketch001 = startSketchOn('XZ')
-
+  |> startProfileAt([75.8, 317.2], %) // [$startCapTag, $EndCapTag]
-      |> startProfileAt([75.8, 317.2], %) // [$startCapTag, $EndCapTag]
+  |> angledLine([0, 268.43], %, $rectangleSegmentA001)
-      |> angledLine([0, 268.43], %, $rectangleSegmentA001)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA001) - 90,
-           segAng(rectangleSegmentA001) - 90,
+       217.26
-           217.26
+     ], %, $seg01)
-         ], %, $seg01)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA001),
-           segAng(rectangleSegmentA001),
+       -segLen(rectangleSegmentA001)
-           -segLen(rectangleSegmentA001)
+     ], %, $yo)
-         ], %, $yo)
+  |> line(endAbsolute=[profileStartX(%), profileStartY(%)], %, $seg02)
-      |> line(endAbsolute = [profileStartX(%), profileStartY(%)], tag = $seg02)
+  |> close(%)
-      |> close()
+extrude001 = extrude(100, sketch001)
-    extrude001 = extrude(sketch001, length = 100)
+  |> chamfer({
-      |> chamfer({
+       length = 30,
-           length = 30,
+       tags = [getOppositeEdge(seg01)]
-           tags = [getOppositeEdge(seg01)]
+     }, %, $seg03)
-         }, %, $seg03)
+  |> chamfer({ length = 30, tags = [seg01] }, %, $seg04)
-      |> chamfer({ length = 30, tags = [seg01] }, %, $seg04)
+  |> chamfer({
-      |> chamfer({
+       length = 30,
-           length = 30,
+       tags = [getNextAdjacentEdge(seg02)]
-           tags = [getNextAdjacentEdge(seg02)]
+     }, %, $seg05)
-         }, %, $seg05)
+  |> chamfer({
-      |> chamfer({
+       length = 30,
-           length = 30,
+       tags = [getNextAdjacentEdge(yo)]
-           tags = [getNextAdjacentEdge(yo)]
+     }, %, $seg06)
-         }, %, $seg06)
+sketch005 = startSketchOn(extrude001, seg06)
-    sketch005 = startSketchOn(extrude001, seg06)
+profile004 = startProfileAt([-23.43, 19.69], sketch005)
-      |> startProfileAt([-23.43,19.69], %)
+  |> angledLine([0, 9.1], %, $rectangleSegmentA005)
-      |> angledLine([0, 9.1], %, $rectangleSegmentA005)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA005) - 90,
-           segAng(rectangleSegmentA005) - 90,
+       84.07
-           84.07
+     ], %)
-         ], %, $rectangleSegmentB004)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA005),
-           segAng(rectangleSegmentA005),
+       -segLen(rectangleSegmentA005)
-           -segLen(rectangleSegmentA005)
+     ], %)
-         ], %, $rectangleSegmentC004)
+  |> line(endAbsolute=[profileStartX(%), profileStartY(%)], %)
-      |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
+  |> close(%)
-      |> close()
+sketch004 = startSketchOn(extrude001, seg05)
-    sketch004 = startSketchOn(extrude001, seg05)
+profile003 = startProfileAt([82.57, 322.96], sketch004)
-      |> startProfileAt([82.57,322.96], %)
+  |> angledLine([0, 11.16], %, $rectangleSegmentA004)
-      |> angledLine([0, 11.16], %, $rectangleSegmentA004)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA004) - 90,
-           segAng(rectangleSegmentA004) - 90,
+       103.07
-           103.07
+     ], %)
-         ], %, $rectangleSegmentB003)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA004),
-           segAng(rectangleSegmentA004),
+       -segLen(rectangleSegmentA004)
-           -segLen(rectangleSegmentA004)
+     ], %)
-         ], %, $rectangleSegmentC003)
+  |> line(endAbsolute=[profileStartX(%), profileStartY(%)], %)
-      |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
+  |> close(%)
-      |> close()
+sketch003 = startSketchOn(extrude001, seg04)
-    sketch003 = startSketchOn(extrude001, seg04)
+profile002 = startProfileAt([-209.64, 255.28], sketch003)
-      |> startProfileAt([-209.64,255.28], %)
+  |> angledLine([0, 11.56], %, $rectangleSegmentA003)
-      |> angledLine([0, 11.56], %, $rectangleSegmentA003)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA003) - 90,
-           segAng(rectangleSegmentA003) - 90,
+       106.84
-           106.84
+     ], %)
-         ], %, $rectangleSegmentB002)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA003),
-           segAng(rectangleSegmentA003),
+       -segLen(rectangleSegmentA003)
-           -segLen(rectangleSegmentA003)
+     ], %)
-         ], %, $rectangleSegmentC002)
+  |> line(endAbsolute=[profileStartX(%), profileStartY(%)], %)
-      |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
+  |> close(%)
-      |> close()
+sketch002 = startSketchOn(extrude001, seg03)
-    sketch002 = startSketchOn(extrude001, seg03)
+profile001 = startProfileAt([205.96, 254.59], sketch002)
-      |> startProfileAt([205.96,254.59], %)
+  |> angledLine([0, 11.39], %, $rectangleSegmentA002)
-      |> angledLine([0, 11.39], %, $rectangleSegmentA002)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA002) - 90,
-           segAng(rectangleSegmentA002) - 90,
+       105.26
-           105.26
+     ], %)
-         ], %, $rectangleSegmentB001)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA002),
-           segAng(rectangleSegmentA002),
+       -segLen(rectangleSegmentA002)
-           -segLen(rectangleSegmentA002)
+     ], %)
-         ], %, $rectangleSegmentC001)
+  |> line(endAbsolute=[profileStartX(%), profileStartY(%)], %)
-      |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
+  |> close(%)
-      |> close()
+`,
-    `,
           { shouldNormalise: true }
         )
       })
@@ -439,18 +418,13 @@ test.describe('Point-and-click tests', { tag: ['@skipWin'] }, () => {
         beforeChamferSnippetEnd: '}, extrude001)',
         afterChamferSelectSnippet:
           'sketch002 = startSketchOn(extrude001, seg03)',
-        afterRectangle1stClickSnippet: 'startProfileAt([205.96, 254.59], %)',
+        afterRectangle1stClickSnippet:
-        afterRectangle2ndClickSnippet: `angledLine([0, 11.39], %, $rectangleSegmentA002)
+          'startProfileAt([205.96, 254.59], sketch002)',
-    |> angledLine([
+        afterRectangle2ndClickSnippet: `angledLine([0,11.39],%,$rectangleSegmentA002)
-         segAng(rectangleSegmentA002) - 90,
+        |>angledLine([segAng(rectangleSegmentA002)-90,105.26],%)
-         105.26
+        |>angledLine([segAng(rectangleSegmentA002),-segLen(rectangleSegmentA002)],%)
-       ], %, $rectangleSegmentB001)
+        |>line(endAbsolute=[profileStartX(%),profileStartY(%)],%)
-    |> angledLine([
+        |>close(%)`,
-         segAng(rectangleSegmentA002),
-         -segLen(rectangleSegmentA002)
-       ], %, $rectangleSegmentC001)
-    |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
-    |> close()`,
       })
       await editor.expectEditor.toContain(
         `sketch001 = startSketchOn('XZ')
@@ -480,24 +454,119 @@ chamf = chamfer({
        ]
      }, %)
 sketch002 = startSketchOn(extrude001, seg03)
-  |> startProfileAt([205.96, 254.59], %)
+profile001 = startProfileAt([205.96, 254.59], sketch002)
   |> angledLine([0, 11.39], %, $rectangleSegmentA002)
   |> angledLine([
        segAng(rectangleSegmentA002) - 90,
        105.26
-     ], %, $rectangleSegmentB001)
+     ], %)
   |> angledLine([
        segAng(rectangleSegmentA002),
        -segLen(rectangleSegmentA002)
-     ], %, $rectangleSegmentC001)
+     ], %)
-  |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
+  |> line(endAbsolute=[profileStartX(%), profileStartY(%)], %)
-  |> close()
+  |> close(%)
 `,
         { shouldNormalise: true }
       )
     })
   })
 
+  test(`Verify axis, origin, and horizontal snapping`, async ({
+    page,
+    homePage,
+    editor,
+    toolbar,
+    scene,
+  }) => {
+    const viewPortSize = { width: 1200, height: 500 }
+
+    await page.setBodyDimensions(viewPortSize)
+
+    await homePage.goToModelingScene()
+
+    // Constants and locators
+    // These are mappings from screenspace to KCL coordinates,
+    // until we merge in our coordinate system helpers
+    const xzPlane = [
+      viewPortSize.width * 0.65,
+      viewPortSize.height * 0.3,
+    ] as const
+    const originSloppy = {
+      screen: [
+        viewPortSize.width / 2 + 3, // 3px off the center of the screen
+        viewPortSize.height / 2,
+      ],
+      kcl: [0, 0],
+    } as const
+    const xAxisSloppy = {
+      screen: [
+        viewPortSize.width * 0.75,
+        viewPortSize.height / 2 - 3, // 3px off the X-axis
+      ],
+      kcl: [20.34, 0],
+    } as const
+    const offYAxis = {
+      screen: [
+        viewPortSize.width * 0.6, // Well off the Y-axis, out of snapping range
+        viewPortSize.height * 0.3,
+      ],
+      kcl: [8.14, 6.78],
+    } as const
+    const yAxisSloppy = {
+      screen: [
+        viewPortSize.width / 2 + 5, // 5px off the Y-axis
+        viewPortSize.height * 0.3,
+      ],
+      kcl: [0, 6.78],
+    } as const
+    const [clickOnXzPlane, moveToXzPlane] = scene.makeMouseHelpers(...xzPlane)
+    const [clickOriginSloppy] = scene.makeMouseHelpers(...originSloppy.screen)
+    const [clickXAxisSloppy, moveXAxisSloppy] = scene.makeMouseHelpers(
+      ...xAxisSloppy.screen
+    )
+    const [dragToOffYAxis, dragFromOffAxis] = scene.makeDragHelpers(
+      ...offYAxis.screen
+    )
+
+    const expectedCodeSnippets = {
+      sketchOnXzPlane: `sketch001 = startSketchOn('XZ')`,
+      pointAtOrigin: `startProfileAt([${originSloppy.kcl[0]}, ${originSloppy.kcl[1]}], sketch001)`,
+      segmentOnXAxis: `xLine(${xAxisSloppy.kcl[0]}, %)`,
+      afterSegmentDraggedOffYAxis: `startProfileAt([${offYAxis.kcl[0]}, ${offYAxis.kcl[1]}], sketch001)`,
+      afterSegmentDraggedOnYAxis: `startProfileAt([${yAxisSloppy.kcl[0]}, ${yAxisSloppy.kcl[1]}], sketch001)`,
+    }
+
+    await test.step(`Start a sketch on the XZ plane`, async () => {
+      await editor.closePane()
+      await toolbar.startSketchPlaneSelection()
+      await moveToXzPlane()
+      await clickOnXzPlane()
+      // timeout wait for engine animation is unavoidable
+      await page.waitForTimeout(600)
+      await editor.expectEditor.toContain(expectedCodeSnippets.sketchOnXzPlane)
+    })
+    await test.step(`Place a point a few pixels off the middle, verify it still snaps to 0,0`, async () => {
+      await clickOriginSloppy()
+      await editor.expectEditor.toContain(expectedCodeSnippets.pointAtOrigin)
+    })
+    await test.step(`Add a segment on x-axis after moving the mouse a bit, verify it snaps`, async () => {
+      await moveXAxisSloppy()
+      await clickXAxisSloppy()
+      await editor.expectEditor.toContain(expectedCodeSnippets.segmentOnXAxis)
+    })
+    await test.step(`Unequip line tool`, async () => {
+      await toolbar.lineBtn.click()
+      await expect(toolbar.lineBtn).not.toHaveAttribute('aria-pressed', 'true')
+    })
+    await test.step(`Drag the origin point up and to the right, verify it's past snapping`, async () => {
+      await dragToOffYAxis({
+        fromPoint: { x: originSloppy.screen[0], y: originSloppy.screen[1] },
+      })
+    })
+  })
+  // yo
+
   test(`Verify axis, origin, and horizontal snapping`, async ({
     page,
     homePage,
@@ -1001,6 +1070,21 @@ sketch002 = startSketchOn('XZ')
       await cmdBar.progressCmdBar()
       await page.waitForTimeout(500)
     })
+    //   // yo
+    //   await clickOnSketch2()
+    //   await page.waitForTimeout(500)
+    //   await cmdBar.progressCmdBar()
+    //   await toolbar.openPane('code')
+    //   await page.waitForTimeout(500)
+    // })
+
+    // await test.step(`Confirm code is added to the editor, scene has changed`, async () => {
+    //   await scene.expectPixelColor([135, 64, 73], testPoint, 15)
+    //   await editor.expectEditor.toContain(sweepDeclaration)
+    //   await editor.expectState({
+    //     diagnostics: [],
+    //     activeLines: [sweepDeclaration],
+    //     highlightedCode: '',
 
     await test.step(`Confirm code is added to the editor, scene has changed`, async () => {
       await scene.expectPixelColor([135, 64, 73], testPoint, 15)

e2e/playwright/prompt-to-edit.spec.ts

@@ -35,7 +35,7 @@ sketch003 = startSketchOn('XY')
 extrude003 = extrude(sketch003, length = 20)
 `
 
-test.fixme('Check the happy path, for basic changing color', () => {
+test.describe('Check the happy path, for basic changing color', () => {
   const cases = [
     {
       desc: 'User accepts change',