feature- Button to pause execution #6828

src/components/ModelingSidebar/ModelingPanes/KclEditorMenu.tsx

@@ -10,6 +10,7 @@ import { openExternalBrowserIfDesktop } from '@src/lib/openWindow'
 import { kclManager } from '@src/lib/singletons'
 import { reportRejection } from '@src/lib/trap'
 import { commandBarActor, settingsActor } from '@src/lib/singletons'
+import { PauseKclExecutionButton } from '@src/components/PauseKclExecutionButton'
 
 import styles from './KclEditorMenu.module.css'
 
@@ -124,6 +125,11 @@ export const KclEditorMenu = ({ children }: PropsWithChildren) => {
               </small>
             </a>
           </Menu.Item>
+          <Menu.Item>
+            <div className={styles.button + ' flex items-center justify-between'}>
+              <PauseKclExecutionButton />
+            </div>
+          </Menu.Item>
         </Menu.Items>
       </div>
     </Menu>

src/components/PauseKclExecutionButton.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { useKclContext } from '@src/lang/KclProvider'
+import { Toggle } from '@src/components/Toggle/Toggle'
+
+const TOGGLE_NAME = "pause-kcl-execution-toggle"
+
+export function PauseKclExecutionButton() {
+  const { isPaused, togglePause } = useKclContext()
+
+  // stop the live update of the kcl code
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation()
+  }
+
+  const handleChange = () => {
+    togglePause()
+  }
+
+  return (
+    <div 
+      className="flex items-center justify-between w-full px-2"
+      onClick={handleClick} // Stop propagation here
+      role="presentation"
+    >
+      <label htmlFor={TOGGLE_NAME} className="text-sm mr-2 cursor-pointer flex-grow">
+        Pause KCL Execution
+      </label>
+      <Toggle
+        name={TOGGLE_NAME}
+        checked={isPaused}
+        onChange={handleChange}
+      />
+    </div>
+  )
+}

src/lang/KclProvider.tsx

@@ -17,6 +17,8 @@ const KclContext = createContext({
   logs: kclManager?.logs,
   errors: kclManager?.errors,
   wasmInitFailed: kclManager?.wasmInitFailed,
+  isPaused: kclManager?.isPaused || false,
+  togglePause: () => kclManager?.togglePause(),
 })
 
 export function useKclContext() {
@@ -43,6 +45,7 @@ export function KclContextProvider({
   const [errors, setErrors] = useState<KCLError[]>([])
   const [logs, setLogs] = useState<string[]>([])
   const [wasmInitFailed, setWasmInitFailed] = useState(false)
+  const [isPaused, setIsPaused] = useState(kclManager?.isPaused || false)
 
   useEffect(() => {
     codeManager.registerCallBacks({
@@ -56,6 +59,7 @@ export function KclContextProvider({
       setDiagnostics,
       setIsExecuting,
       setWasmInitFailed,
+      setIsPaused,
     })
   }, [])
 
@@ -70,6 +74,8 @@ export function KclContextProvider({
         logs,
         errors,
         wasmInitFailed,
+        isPaused,
+        togglePause: () => kclManager.togglePause(),
       }}
     >
       {children}

src/lang/KclSingleton.ts

@@ -116,6 +116,7 @@ export class KclManager {
   private _switchedFiles = false
   private _fileSettings: KclSettingsAnnotation = {}
   private _kclVersion: string | undefined = undefined
+  private _isPaused = false
   private singletons: Singletons
 
   engineCommandManager: EngineCommandManager
@@ -131,6 +132,7 @@ export class KclManager {
   private _kclErrorsCallBack: (errors: KCLError[]) => void = () => {}
   private _diagnosticsCallback: (errors: Diagnostic[]) => void = () => {}
   private _wasmInitFailedCallback: (arg: boolean) => void = () => {}
+  private _isPausedCallback: (arg: boolean) => void = () => {}
   sceneInfraBaseUnitMultiplierSetter: (unit: BaseUnit) => void = () => {}
 
   get ast() {
@@ -249,6 +251,21 @@ export class KclManager {
     this._executeIsStale = executeIsStale
   }
 
+  get isPaused() {
+    return this._isPaused
+  }
+
+  set isPaused(isPaused) {
+    this._isPaused = isPaused
+    this._isPausedCallback(isPaused)
+    if (!isPaused && this.executeIsStale) {
+      const args = this.executeIsStale
+      this.executeIsStale = null
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      this.executeAst(args)
+    }
+  }
+
   get wasmInitFailed() {
     return this._wasmInitFailed
   }
@@ -284,6 +301,7 @@ export class KclManager {
     setDiagnostics,
     setIsExecuting,
     setWasmInitFailed,
+    setIsPaused,
   }: {
     setVariables: (arg: VariableMap) => void
     setAst: (arg: Node<Program>) => void
@@ -292,6 +310,7 @@ export class KclManager {
     setDiagnostics: (errors: Diagnostic[]) => void
     setIsExecuting: (arg: boolean) => void
     setWasmInitFailed: (arg: boolean) => void
+    setIsPaused: (arg: boolean) => void
   }) {
     this._variablesCallBack = setVariables
     this._astCallBack = setAst
@@ -300,6 +319,7 @@ export class KclManager {
     this._diagnosticsCallback = setDiagnostics
     this._isExecutingCallback = setIsExecuting
     this._wasmInitFailedCallback = setWasmInitFailed
+    this._isPausedCallback = setIsPaused
   }
 
   clearAst() {
@@ -425,6 +445,10 @@ export class KclManager {
   // this function, too many other things that don't want it exist. For that,
   // use updateModelingState().
   async executeAst(args: ExecuteArgs = {}): Promise<void> {
+    if (this.isPaused) {
+      this.executeIsStale = args
+      return
+    }
     if (this.isExecuting) {
       this.executeIsStale = args
 
@@ -770,6 +794,10 @@ export class KclManager {
       settings?.defaultLengthUnit || DEFAULT_DEFAULT_LENGTH_UNIT
     )
   }
+
+  togglePause(): void {
+    this.isPaused = !this.isPaused
+  }
 }
 
 const defaultSelectionFilter: EntityType_type[] = [