Add ability to immediately enter sketch mode by double-clicking an existing sketch (#4573)

* Implement the functionality

* Another fmt

* Fix handler to not rely on modelingMachine's context,
because that creates an implicit race

* Write an E2E test

* Fix tsc and fmt

* Use artifactGraph helpers for more concise code

Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>

* Fix up imports and whatnot from commit 2bfc5f5c

* Make early return more clear with curly braces

* Whoops should have linted

---------

Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>

e2e/playwright/fixtures/sceneFixture.ts

@@ -28,6 +28,7 @@ type SceneSerialised = {
 
 type ClickHandler = (clickParams?: mouseParams) => Promise<void | boolean>
 type MoveHandler = (moveParams?: mouseParams) => Promise<void | boolean>
+type DblClickHandler = (clickParams?: mouseParams) => Promise<void | boolean>
 type DragToHandler = (dragParams: mouseDragToParams) => Promise<void | boolean>
 type DragFromHandler = (
   dragParams: mouseDragFromParams
@@ -68,7 +69,7 @@ export class SceneFixture {
     x: number,
     y: number,
     { steps }: { steps: number } = { steps: 20 }
-  ): [ClickHandler, MoveHandler] =>
+  ): [ClickHandler, MoveHandler, DblClickHandler] =>
     [
       (clickParams?: mouseParams) => {
         if (clickParams?.pixelDiff) {
@@ -90,6 +91,16 @@ export class SceneFixture {
         }
         return this.page.mouse.move(x, y, { steps })
       },
+      (clickParams?: mouseParams) => {
+        if (clickParams?.pixelDiff) {
+          return doAndWaitForImageDiff(
+            this.page,
+            () => this.page.mouse.dblclick(x, y),
+            clickParams.pixelDiff
+          )
+        }
+        return this.page.mouse.dblclick(x, y)
+      },
     ] as const
   makeDragHelpers = (
     x: number,

e2e/playwright/point-click.spec.ts

@@ -552,6 +552,82 @@ test(`Verify axis, origin, and horizontal snapping`, async ({
   })
 })
 
+test(`Verify user can double-click to edit a sketch`, async ({
+  app,
+  editor,
+  toolbar,
+  scene,
+}) => {
+  const initialCode = `closedSketch = startSketchOn('XZ')
+  |> circle({ center = [8, 5], radius = 2 }, %)
+openSketch = startSketchOn('XY')
+  |> startProfileAt([-5, 0], %)
+  |> lineTo([0, 5], %)
+  |> xLine(5, %)
+  |> tangentialArcTo([10, 0], %)
+`
+  await app.initialise(initialCode)
+
+  const pointInsideCircle = {
+    x: app.viewPortSize.width * 0.63,
+    y: app.viewPortSize.height * 0.5,
+  }
+  const pointOnPathAfterSketching = {
+    x: app.viewPortSize.width * 0.58,
+    y: app.viewPortSize.height * 0.5,
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_clickOpenPath, moveToOpenPath, dblClickOpenPath] =
+    scene.makeMouseHelpers(
+      pointOnPathAfterSketching.x,
+      pointOnPathAfterSketching.y
+    )
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_clickCircle, moveToCircle, dblClickCircle] = scene.makeMouseHelpers(
+    pointInsideCircle.x,
+    pointInsideCircle.y
+  )
+
+  const exitSketch = async () => {
+    await test.step(`Exit sketch mode`, async () => {
+      await toolbar.exitSketchBtn.click()
+      await expect(toolbar.exitSketchBtn).not.toBeVisible()
+      await expect(toolbar.startSketchBtn).toBeEnabled()
+    })
+  }
+
+  await test.step(`Double-click on the closed sketch`, async () => {
+    await moveToCircle()
+    await dblClickCircle()
+    await expect(toolbar.startSketchBtn).not.toBeVisible()
+    await expect(toolbar.exitSketchBtn).toBeVisible()
+    await editor.expectState({
+      activeLines: [`|>circle({center=[8,5],radius=2},%)`],
+      highlightedCode: 'circle({center=[8,5],radius=2},%)',
+      diagnostics: [],
+    })
+  })
+
+  await exitSketch()
+
+  await test.step(`Double-click on the open sketch`, async () => {
+    await moveToOpenPath()
+    await scene.expectPixelColor([250, 250, 250], pointOnPathAfterSketching, 15)
+    // There is a full execution after exiting sketch that clears the scene.
+    await app.page.waitForTimeout(500)
+    await dblClickOpenPath()
+    await expect(toolbar.startSketchBtn).not.toBeVisible()
+    await expect(toolbar.exitSketchBtn).toBeVisible()
+    // Wait for enter sketch mode to complete
+    await app.page.waitForTimeout(500)
+    await editor.expectState({
+      activeLines: [`|>xLine(5,%)`],
+      highlightedCode: 'xLine(5,%)',
+      diagnostics: [],
+    })
+  })
+})
+
 test(`Offset plane point-and-click`, async ({
   app,
   scene,

src/components/Stream.tsx

@@ -18,6 +18,8 @@ import { useRouteLoaderData } from 'react-router-dom'
 import { PATHS } from 'lib/paths'
 import { IndexLoaderData } from 'lib/types'
 import { useCommandsContext } from 'hooks/useCommandsContext'
+import { err, reportRejection } from 'lib/trap'
+import { getArtifactOfTypes } from 'lang/std/artifactGraph'
 
 enum StreamState {
   Playing = 'playing',
@@ -280,12 +282,49 @@ export const Stream = () => {
     }
   }
 
+  /**
+   * On double-click of sketch entities we automatically enter sketch mode with the selected sketch,
+   * allowing for quick editing of sketches. TODO: This should be moved to a more central place.
+   */
+  const enterSketchModeIfSelectingSketch: MouseEventHandler<HTMLDivElement> = (
+    e
+  ) => {
+    if (
+      !isNetworkOkay ||
+      !videoRef.current ||
+      state.matches('Sketch') ||
+      state.matches({ idle: 'showPlanes' }) ||
+      sceneInfra.camControls.wasDragging === true ||
+      !btnName(e.nativeEvent).left
+    ) {
+      return
+    }
+
+    sendSelectEventToEngine(e, videoRef.current)
+      .then(({ entity_id }) => {
+        if (!entity_id) {
+          // No entity selected. This is benign
+          return
+        }
+        const path = getArtifactOfTypes(
+          { key: entity_id, types: ['path', 'solid2D', 'segment'] },
+          engineCommandManager.artifactGraph
+        )
+        if (err(path)) {
+          return path
+        }
+        sceneInfra.modelingSend({ type: 'Enter sketch' })
+      })
+      .catch(reportRejection)
+  }
+
   return (
     <div
       className="absolute inset-0 z-0"
       id="stream"
       data-testid="stream"
       onClick={handleMouseUp}
+      onDoubleClick={enterSketchModeIfSelectingSketch}
       onContextMenu={(e) => e.preventDefault()}
       onContextMenuCapture={(e) => e.preventDefault()}
     >