enable editor changes in sketch mode, refactor some of the code manager (#2287)

* Revert "Revert "client side sketch updating properly with direct changes to t… (#2286)"

This reverts commit e7ab645267.

* rejig out side of xstate

* test tweak

* more test tweak

* refactor some codeManager stuff

* tsc

* try and fix tests

* revert small uneeded change

* fix

* snapshot tweak

* more test tweak

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

* small tweak

* disable bad test

* fmt

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

e2e/playwright/flow-tests.spec.ts

@@ -528,6 +528,10 @@ test.describe('Can create sketches on all planes and their back sides', () => {
 })
 
 test('Auto complete works', async ({ page }) => {
+  test.skip(
+    true,
+    'CORS issue stopping the kcl lsp from working, enable again later'
+  )
   const u = getUtils(page)
   // const PUR = 400 / 37.5 //pixeltoUnitRatio
   await page.setViewportSize({ width: 1200, height: 500 })
@@ -1390,7 +1394,7 @@ test('Deselecting line tool should mean nothing happens on click', async ({
     `const part001 = startSketchOn('-XZ')`
   )
 
-  await page.waitForTimeout(300)
+  await page.waitForTimeout(600)
 
   let previousCodeContent = await page.locator('.cm-content').innerText()
 

e2e/playwright/snapshot-tests.spec.ts

@@ -507,7 +507,7 @@ test('Draft rectangles should look right', async ({ page, context }) => {
     `const part001 = startSketchOn('-XZ')`
   )
 
-  await page.waitForTimeout(300) // TODO detect animation ending, or disable animation
+  await page.waitForTimeout(500) // TODO detect animation ending, or disable animation
   await u.closeDebugPanel()
 
   const startXPx = 600
@@ -597,12 +597,15 @@ test.describe('Client side scene scale should match engine scale', () => {
 
     // exit sketch
     await u.openAndClearDebugPanel()
-    await page.getByRole('button', { name: 'Exit Sketch' }).click()
+    await u.doAndWaitForImageDiff(
+      () => page.getByRole('button', { name: 'Exit Sketch' }).click(),
+      200
+    )
 
     // wait for execution done
     await u.expectCmdLog('[data-message-type="execution-done"]')
     await u.clearAndCloseDebugPanel()
-    await page.waitForTimeout(200)
+    await page.waitForTimeout(300)
 
     // second screen shot should look almost identical, i.e. scale should be the same.
     await expect(page).toHaveScreenshot({
@@ -696,12 +699,15 @@ test.describe('Client side scene scale should match engine scale', () => {
 
     // exit sketch
     await u.openAndClearDebugPanel()
-    await page.getByRole('button', { name: 'Exit Sketch' }).click()
+    await u.doAndWaitForImageDiff(
+      () => page.getByRole('button', { name: 'Exit Sketch' }).click(),
+      200
+    )
 
     // wait for execution done
     await u.expectCmdLog('[data-message-type="execution-done"]')
     await u.clearAndCloseDebugPanel()
-    await page.waitForTimeout(200)
+    await page.waitForTimeout(300)
 
     // second screen shot should look almost identical, i.e. scale should be the same.
     await expect(page).toHaveScreenshot({

src/clientSideScene/sceneEntities.ts

@@ -964,7 +964,7 @@ export class SceneEntities {
       if (!draftInfo)
         // don't want to mod the user's code yet as they have't committed to the change yet
         // plus this would be the truncated ast being recast, it would be wrong
-        codeManager.updateCodeStateEditor(code)
+        codeManager.updateCodeEditor(code)
       const { programMemory } = await executeAst({
         ast: truncatedAst,
         useFakeExecutor: true,

src/components/ModelingSidebar/ModelingPanes/KclEditorPane.tsx

@@ -2,7 +2,7 @@ import ReactCodeMirror from '@uiw/react-codemirror'
 import { TEST } from 'env'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Themes, getSystemTheme } from 'lib/theme'
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { highlightSelectionMatches, searchKeymap } from '@codemirror/search'
 import { lineHighlightField } from 'editor/highlightextension'
 import { roundOff } from 'lib/utils'
@@ -190,13 +190,15 @@ export const KclEditorPane = () => {
     return extensions
   }, [kclLSP, copilotLSP, textWrapping.current, cursorBlinking.current])
 
+  const initialCode = useRef(codeManager.code)
+
   return (
     <div
       id="code-mirror-override"
       className={'absolute inset-0 ' + (cursorBlinking.current ? 'blink' : '')}
     >
       <ReactCodeMirror
-        value={codeManager.code}
+        value={initialCode.current}
         extensions={editorExtensions}
         theme={theme}
         onCreateEditor={(_editorView) =>

src/editor/manager.ts

@@ -189,6 +189,7 @@ export default class EditorManager {
     const ignoreEvents: ModelingMachineEvent['type'][] = [
       'Equip Line tool',
       'Equip tangential arc to',
+      'Equip rectangle tool',
     ]
 
     if (!this._modelingEvent) {

src/lang/KclSingleton.ts

@@ -17,7 +17,7 @@ import {
   ExtrudeGroup,
 } from 'lang/wasm'
 import { getNodeFromPath } from './queryAst'
-import { codeManager, editorManager } from 'lib/singletons'
+import { codeManager, editorManager, sceneInfra } from 'lib/singletons'
 
 export class KclManager {
   private _ast: Program = {
@@ -187,6 +187,7 @@ export class KclManager {
       ast,
       engineCommandManager: this.engineCommandManager,
     })
+    sceneInfra.modelingSend({ type: 'code edit during sketch' })
     enterEditMode(programMemory, this.engineCommandManager)
     this.isExecuting = false
     // Check the cancellation token for this execution before applying side effects
@@ -219,7 +220,7 @@ export class KclManager {
     const newCode = recast(ast)
     const newAst = this.safeParse(newCode)
     if (!newAst) return
-    codeManager.updateCodeStateEditor(newCode)
+    codeManager.updateCodeEditor(newCode)
     // Write the file to disk.
     await codeManager.writeToFile()
     await this?.engineCommandManager?.waitForReady
@@ -316,7 +317,7 @@ export class KclManager {
     if (execute) {
       // Call execute on the set ast.
       // Update the code state and editor.
-      codeManager.updateCodeStateEditor(newCode)
+      codeManager.updateCodeEditor(newCode)
       // Write the file to disk.
       await codeManager.writeToFile()
       await this.executeAst(astWithUpdatedSource)

src/lang/codeManager.ts

@@ -11,8 +11,7 @@ const PERSIST_CODE_TOKEN = 'persistCode'
 
 export default class CodeManager {
   private _code: string = bracket
-  private _updateState: (arg: string) => void = () => {}
+  #updateState: (arg: string) => void = () => {}
-  private _updateEditor: (arg: string) => void = () => {}
   private _currentFilePath: string | null = null
 
   constructor() {
@@ -46,7 +45,7 @@ export default class CodeManager {
   }
 
   registerCallBacks({ setCode }: { setCode: (arg: string) => void }) {
-    this._updateState = setCode
+    this.#updateState = setCode
   }
 
   updateCurrentFilePath(path: string) {
@@ -57,18 +56,20 @@ export default class CodeManager {
   updateCodeState(code: string): void {
     if (this._code !== code) {
       this.code = code
-      this._updateState(code)
+      this.#updateState(code)
     }
   }
 
   // Update the code in the editor.
   updateCodeEditor(code: string): void {
-    const lastCode = this._code
     this.code = code
-    this._updateEditor(code)
     if (editorManager.editorView) {
       editorManager.editorView.dispatch({
-        changes: { from: 0, to: lastCode.length, insert: code },
+        changes: {
+          from: 0,
+          to: editorManager.editorView.state.doc.length,
+          insert: code,
+        },
       })
     }
   }
@@ -77,8 +78,7 @@ export default class CodeManager {
   updateCodeStateEditor(code: string): void {
     if (this._code !== code) {
       this.code = code
-      this._updateState(code)
+      this.#updateState(code)
-      this._updateEditor(code)
     }
   }
 

src/routes/Onboarding/FutureWork.tsx

@@ -12,7 +12,7 @@ export default function FutureWork() {
 
   useEffect(() => {
     // We do want to update both the state and editor here.
-    codeManager.updateCodeStateEditor(bracket)
+    codeManager.updateCodeEditor(bracket)
     if (kclManager.engineCommandManager.engineConnection?.isReady()) {
       // If the engine is ready, promptly execute the loaded code
       kclManager.executeCode(true)

src/routes/Onboarding/Introduction.tsx

@@ -56,7 +56,7 @@ function OnboardingWithNewFile() {
               dismiss={dismiss}
               next={() => {
                 // We do want to update both the state and editor here.
-                codeManager.updateCodeStateEditor(bracket)
+                codeManager.updateCodeEditor(bracket)
                 kclManager.executeCode(true)
                 next()
               }}
@@ -80,7 +80,7 @@ function OnboardingWithNewFile() {
               dismiss={dismiss}
               next={() => {
                 void createAndOpenNewProject()
-                codeManager.updateCodeStateEditor(bracket)
+                codeManager.updateCodeEditor(bracket)
                 dismiss()
               }}
               nextText="Make a new project"
@@ -113,7 +113,7 @@ export default function Introduction() {
   const isStarterCode = currentCode === '' || currentCode === bracket
 
   useEffect(() => {
-    if (codeManager.code === '') codeManager.updateCodeStateEditor(bracket)
+    if (codeManager.code === '') codeManager.updateCodeEditor(bracket)
   }, [])
 
   return isStarterCode ? (

src/routes/Onboarding/Sketching.tsx

@@ -11,7 +11,7 @@ export default function Sketching() {
 
   useEffect(() => {
     // We do want to update both the state and editor here.
-    codeManager.updateCodeStateEditor('')
+    codeManager.updateCodeEditor('')
     if (kclManager.engineCommandManager.engineConnection?.isReady()) {
       // If the engine is ready, promptly execute the loaded code
       kclManager.executeCode(true)