inital rework of execution (#528)

* inital rework Signed-off-by: Jess Frazelle <github@jessfraz.com> * updates Signed-off-by: Jess Frazelle <github@jessfraz.com> * update the program memory as well Signed-off-by: Jess Frazelle <github@jessfraz.com> * cleanups Signed-off-by: Jess Frazelle <github@jessfraz.com> * code Signed-off-by: Jess Frazelle <github@jessfraz.com> * updates for typing code Signed-off-by: Jess Frazelle <github@jessfraz.com> * fixing Signed-off-by: Jess Frazelle <github@jessfraz.com> * some fixes Signed-off-by: Jess Frazelle <github@jessfraz.com> * more fixes Signed-off-by: Jess Frazelle <github@jessfraz.com> * Only unselect line or move tool on escape, don't exit sketch * Make scrollbar on toolbar smaller * Add escape to exit sketch mode * tidy up usestore * clear scene on empty file * disable sketch mode and re-execute on sketch loop close * disable all but xy plane * fix entering back into edit mode --------- Signed-off-by: Jess Frazelle <github@jessfraz.com> Co-authored-by: Frank Noirot <frank@kittycad.io> Co-authored-by: Kurt Hutten Irev-Dev <k.hutten@protonmail.ch>
2023-09-15 04:35:48 -07:00
parent 663c396128
commit e4f2e66029
22 changed files with 448 additions and 260 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -31,7 +31,7 @@ import { CodeMenu } from 'components/CodeMenu'
 import { TextEditor } from 'components/TextEditor'
 import { Themes, getSystemTheme } from 'lib/theme'
 import { useSetupEngineManager } from 'hooks/useSetupEngineManager'
-import { useCodeEval } from 'hooks/useCodeEval'
+import { useEngineConnectionSubscriptions } from 'hooks/useEngineConnectionSubscriptions'

 export function App() {
  const { code: loadedCode, project } = useLoaderData() as IndexLoaderData
@ -47,8 +47,10 @@ export function App() {
    didDragInStream,
    streamDimensions,
    guiMode,
+    setGuiMode,
  } = useStore((s) => ({
    guiMode: s.guiMode,
+    setGuiMode: s.setGuiMode,
    setCode: s.setCode,
    engineCommandManager: s.engineCommandManager,
    buttonDownInStream: s.buttonDownInStream,
@ -82,6 +84,38 @@ export function App() {
  useHotkeys('shift + l', () => togglePane('logs'))
  useHotkeys('shift + e', () => togglePane('kclErrors'))
  useHotkeys('shift + d', () => togglePane('debug'))
+  useHotkeys('esc', () => {
+    if (guiMode.mode === 'sketch') {
+      if (guiMode.sketchMode === 'selectFace') return
+      if (guiMode.sketchMode === 'sketchEdit') {
+        engineCommandManager?.sendSceneCommand({
+          type: 'modeling_cmd_req',
+          cmd_id: uuidv4(),
+          cmd: { type: 'edit_mode_exit' },
+        })
+        setGuiMode({ mode: 'default' })
+      } else {
+        engineCommandManager?.sendSceneCommand({
+          type: 'modeling_cmd_req',
+          cmd_id: uuidv4(),
+          cmd: {
+            type: 'set_tool',
+            tool: 'select',
+          },
+        })
+        setGuiMode({
+          mode: 'sketch',
+          sketchMode: 'sketchEdit',
+          rotation: guiMode.rotation,
+          position: guiMode.position,
+          pathToNode: guiMode.pathToNode,
+          // todo: ...guiMod is adding isTooltip: true, will probably just fix with xstate migtaion
+        })
+      }
+    } else {
+      setGuiMode({ mode: 'default' })
+    }
+  })

  const paneOpacity =
    onboardingStatus === onboardingPaths.CAMERA
@ -105,7 +139,7 @@ export function App() {
  }, [loadedCode, setCode])

  useSetupEngineManager(streamRef, token)
-  useCodeEval()
+  useEngineConnectionSubscriptions()

  const debounceSocketSend = throttle<EngineCommand>((message) => {
    engineCommandManager?.sendSceneCommand(message)
--- a/src/Toolbar.module.css
+++ b/src/Toolbar.module.css
@ -47,6 +47,15 @@
  @apply hover:bg-cool-20;
 }

+.smallScrollbar::-webkit-scrollbar {
+  @apply h-0.5;
+}
+
+.smallScrollbar {
+  @apply overflow-x-auto;
+  scrollbar-width: thin;
+}
+
 :global(.dark) .popoverToggle {
  @apply hover:bg-cool-90;
 }
--- a/src/Toolbar.tsx
+++ b/src/Toolbar.tsx
@ -27,6 +27,7 @@ export const Toolbar = () => {
    updateAst,
    programMemory,
    engineCommandManager,
+    executeAst,
  } = useStore((s) => ({
    guiMode: s.guiMode,
    setGuiMode: s.setGuiMode,
@ -35,6 +36,7 @@ export const Toolbar = () => {
    updateAst: s.updateAst,
    programMemory: s.programMemory,
    engineCommandManager: s.engineCommandManager,
+    executeAst: s.executeAst,
  }))
  useAppMode()

@ -44,7 +46,7 @@ export const Toolbar = () => {

  function ToolbarButtons() {
    return (
-      <span className="overflow-x-auto">
+      <span className={styles.smallScrollbar}>
        {guiMode.mode === 'default' && (
          <button
            onClick={() => {
@ -70,7 +72,7 @@ export const Toolbar = () => {
                pathToNode,
                programMemory
              )
-              updateAst(modifiedAst)
+              updateAst(modifiedAst, true)
            }}
          >
            SketchOnFace
@ -113,7 +115,7 @@ export const Toolbar = () => {
                  ast,
                  pathToNode
                )
-                updateAst(modifiedAst, { focusPath: pathToExtrudeArg })
+                updateAst(modifiedAst, true, { focusPath: pathToExtrudeArg })
              }}
            >
              ExtrudeSketch
@ -130,7 +132,7 @@ export const Toolbar = () => {
                  pathToNode,
                  false
                )
-                updateAst(modifiedAst, { focusPath: pathToExtrudeArg })
+                updateAst(modifiedAst, true, { focusPath: pathToExtrudeArg })
              }}
            >
              ExtrudeSketch (w/o pipe)
@ -146,7 +148,14 @@ export const Toolbar = () => {
                cmd_id: uuidv4(),
                cmd: { type: 'edit_mode_exit' },
              })
+              engineCommandManager?.sendSceneCommand({
+                type: 'modeling_cmd_req',
+                cmd_id: uuidv4(),
+                cmd: { type: 'default_camera_disable_sketch_mode' },
+              })
+
              setGuiMode({ mode: 'default' })
+              executeAst()
            }}
          >
            Exit sketch
--- a/src/components/Stream.tsx
+++ b/src/components/Stream.tsx
@ -220,9 +220,21 @@ export const Stream = ({ className = '' }) => {
      )
        return

+      // Check if the sketch group already exists.
+      const varDec = getNodeFromPath<VariableDeclarator>(
+        ast,
+        guiMode.pathToNode,
+        'VariableDeclarator'
+      ).node
+      const variableName = varDec?.id?.name
+      const sketchGroup = programMemory.root[variableName]
+      const isEditingExistingSketch =
+        sketchGroup?.type === 'SketchGroup' && sketchGroup.value.length
+
      if (
        resp?.data?.data?.entities_modified?.length &&
-        guiMode.waitingFirstClick
+        guiMode.waitingFirstClick &&
+        !isEditingExistingSketch
      ) {
        const curve = await engineCommandManager?.sendSceneCommand({
          type: 'modeling_cmd_req',
@ -250,10 +262,10 @@ export const Stream = ({ className = '' }) => {
          pathToNode: _pathToNode,
          waitingFirstClick: false,
        })
-        updateAst(_modifiedAst)
+        updateAst(_modifiedAst, false)
      } else if (
        resp?.data?.data?.entities_modified?.length &&
-        !guiMode.waitingFirstClick
+        (!guiMode.waitingFirstClick || isEditingExistingSketch)
      ) {
        const curve = await engineCommandManager?.sendSceneCommand({
          type: 'modeling_cmd_req',
@ -290,6 +302,7 @@ export const Stream = ({ className = '' }) => {
            fnName: 'line',
            pathToNode: guiMode.pathToNode,
          }).modifiedAst
+          updateAst(_modifiedAst, false)
        } else {
          _modifiedAst = addCloseToPipe({
            node: ast,
@ -299,8 +312,15 @@ export const Stream = ({ className = '' }) => {
          setGuiMode({
            mode: 'default',
          })
+          engineCommandManager?.sendSceneCommand({
+            type: 'modeling_cmd_req',
+            cmd_id: uuidv4(),
+            cmd: {
+              type: 'sketch_mode_disable',
+            },
+          })
+          updateAst(_modifiedAst, true)
        }
-        updateAst(_modifiedAst)
      }
    })
    setDidDragInStream(false)
--- a/src/components/TextEditor.tsx
+++ b/src/components/TextEditor.tsx
@ -50,7 +50,7 @@ export const TextEditor = ({
  const pathParams = useParams()
  const {
    code,
-    defferedSetCode,
+    deferredSetCode,
    editorView,
    engineCommandManager,
    formatCode,
@ -60,10 +60,9 @@ export const TextEditor = ({
    setEditorView,
    setIsLSPServerReady,
    setSelectionRanges,
-    sourceRangeMap,
  } = useStore((s) => ({
    code: s.code,
-    defferedSetCode: s.defferedSetCode,
+    deferredSetCode: s.deferredSetCode,
    editorView: s.editorView,
    engineCommandManager: s.engineCommandManager,
    formatCode: s.formatCode,
@ -73,7 +72,6 @@ export const TextEditor = ({
    setEditorView: s.setEditorView,
    setIsLSPServerReady: s.setIsLSPServerReady,
    setSelectionRanges: s.setSelectionRanges,
-    sourceRangeMap: s.sourceRangeMap,
  }))

  const {
@ -126,7 +124,7 @@ export const TextEditor = ({

  // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
  const onChange = (value: string, viewUpdate: ViewUpdate) => {
-    defferedSetCode(value)
+    deferredSetCode(value)
    if (isTauri() && pathParams.id) {
      // Save the file to disk
      // Note that PROJECT_ENTRYPOINT is hardcoded until we support multiple files
@ -174,11 +172,11 @@ export const TextEditor = ({
    )
    const idBasedSelections = codeBasedSelections
      .map(({ type, range }) => {
-        const hasOverlap = Object.entries(sourceRangeMap).filter(
-          ([_, sourceRange]) => {
-            return isOverlap(sourceRange, range)
-          }
-        )
+        const hasOverlap = Object.entries(
+          engineCommandManager?.sourceRangeMap || {}
+        ).filter(([_, sourceRange]) => {
+          return isOverlap(sourceRange, range)
+        })
        if (hasOverlap.length) {
          return {
            type,
--- a/src/components/Toolbar/EqualAngle.tsx
+++ b/src/components/Toolbar/EqualAngle.tsx
@ -82,7 +82,7 @@ export const EqualAngle = () => {
            transformInfos,
            programMemory,
          })
-        updateAst(modifiedAst, {
+        updateAst(modifiedAst, true, {
          callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
        })
      }}
--- a/src/components/Toolbar/EqualLength.tsx
+++ b/src/components/Toolbar/EqualLength.tsx
@ -82,7 +82,7 @@ export const EqualLength = () => {
            transformInfos,
            programMemory,
          })
-        updateAst(modifiedAst, {
+        updateAst(modifiedAst, true, {
          callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
        })
      }}
--- a/src/components/Toolbar/HorzVert.tsx
+++ b/src/components/Toolbar/HorzVert.tsx
@ -61,7 +61,7 @@ export const HorzVert = ({
          programMemory,
          referenceSegName: '',
        })
-        updateAst(modifiedAst, {
+        updateAst(modifiedAst, true, {
          callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
        })
      }}
--- a/src/components/Toolbar/Intersect.tsx
+++ b/src/components/Toolbar/Intersect.tsx
@ -154,7 +154,7 @@ export const Intersect = () => {
          initialVariableName: 'offset',
        } as any)
        if (segName === tagInfo?.tag && value === valueUsedInTransform) {
-          updateAst(modifiedAst, {
+          updateAst(modifiedAst, true, {
            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
          })
        } else {
@ -182,7 +182,7 @@ export const Intersect = () => {
            )
            _modifiedAst.body = newBody
          }
-          updateAst(_modifiedAst, {
+          updateAst(_modifiedAst, true, {
            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
          })
        }
--- a/src/components/Toolbar/RemoveConstrainingValues.tsx
+++ b/src/components/Toolbar/RemoveConstrainingValues.tsx
@ -65,7 +65,7 @@ export const RemoveConstrainingValues = () => {
          programMemory,
          referenceSegName: '',
        })
-        updateAst(modifiedAst, {
+        updateAst(modifiedAst, true, {
          callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
        })
      }}
--- a/src/components/Toolbar/SetAbsDistance.tsx
+++ b/src/components/Toolbar/SetAbsDistance.tsx
@ -124,7 +124,7 @@ export const SetAbsDistance = ({
            _modifiedAst.body = newBody
          }

-          updateAst(_modifiedAst, {
+          updateAst(_modifiedAst, true, {
            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
          })
        } catch (e) {
--- a/src/components/Toolbar/SetAngleBetween.tsx
+++ b/src/components/Toolbar/SetAngleBetween.tsx
@ -113,7 +113,7 @@ export const SetAngleBetween = () => {
          initialVariableName: 'angle',
        } as any)
        if (segName === tagInfo?.tag && value === valueUsedInTransform) {
-          updateAst(modifiedAst, {
+          updateAst(modifiedAst, true, {
            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
          })
        } else {
@ -141,7 +141,7 @@ export const SetAngleBetween = () => {
            )
            _modifiedAst.body = newBody
          }
-          updateAst(_modifiedAst, {
+          updateAst(_modifiedAst, true, {
            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
          })
        }
--- a/src/components/Toolbar/SetHorzVertDistance.tsx
+++ b/src/components/Toolbar/SetHorzVertDistance.tsx
@ -137,7 +137,7 @@ export const SetHorzVertDistance = ({
              constraint === 'setHorzDistance' ? 'xDis' : 'yDis',
          } as any))
        if (segName === tagInfo?.tag && value === valueUsedInTransform) {
-          updateAst(modifiedAst, {
+          updateAst(modifiedAst, true, {
            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
          })
        } else {
@ -163,7 +163,7 @@ export const SetHorzVertDistance = ({
            )
            _modifiedAst.body = newBody
          }
-          updateAst(_modifiedAst, {
+          updateAst(_modifiedAst, true, {
            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
          })
        }
--- a/src/components/Toolbar/setAngleLength.tsx
+++ b/src/components/Toolbar/setAngleLength.tsx
@ -136,7 +136,7 @@ export const SetAngleLength = ({
            _modifiedAst.body = newBody
          }

-          updateAst(_modifiedAst, {
+          updateAst(_modifiedAst, true, {
            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
          })
        } catch (e) {
--- a/src/hooks/useAppMode.ts
+++ b/src/hooks/useAppMode.ts
@ -11,8 +11,9 @@ import { isOverlap } from 'lib/utils'

 interface DefaultPlanes {
  xy: string
-  yz: string
-  xz: string
+  // TODO re-enable
+  // yz: string
+  // xz: string
 }

 export function useAppMode() {
@ -42,24 +43,26 @@ export function useAppMode() {
          y_axis: { x: 0, y: 1, z: 0 },
          color: { r: 0.7, g: 0.28, b: 0.28, a: 0.4 },
        })
-        const yz = createPlane(engineCommandManager, {
-          x_axis: { x: 0, y: 1, z: 0 },
-          y_axis: { x: 0, y: 0, z: 1 },
-          color: { r: 0.28, g: 0.7, b: 0.28, a: 0.4 },
-        })
-        const xz = createPlane(engineCommandManager, {
-          x_axis: { x: 1, y: 0, z: 0 },
-          y_axis: { x: 0, y: 0, z: 1 },
-          color: { r: 0.28, g: 0.28, b: 0.7, a: 0.4 },
-        })
-        setDefaultPlanes({ xy, yz, xz })
+        // TODO re-enable
+        // const yz = createPlane(engineCommandManager, {
+        //   x_axis: { x: 0, y: 1, z: 0 },
+        //   y_axis: { x: 0, y: 0, z: 1 },
+        //   color: { r: 0.28, g: 0.7, b: 0.28, a: 0.4 },
+        // })
+        // const xz = createPlane(engineCommandManager, {
+        //   x_axis: { x: 1, y: 0, z: 0 },
+        //   y_axis: { x: 0, y: 0, z: 1 },
+        //   color: { r: 0.28, g: 0.28, b: 0.7, a: 0.4 },
+        // })
+        setDefaultPlanes({ xy })
      } else {
        setDefaultPlanesHidden(engineCommandManager, defaultPlanes, false)
      }
    }
    if (guiMode.mode !== 'sketch' && defaultPlanes) {
      setDefaultPlanesHidden(engineCommandManager, defaultPlanes, true)
-    } else if (guiMode.mode === 'default') {
+    }
+    if (guiMode.mode === 'default') {
      const pathId =
        engineCommandManager &&
        isCursorInSketchCommandRange(
@ -220,15 +223,17 @@ function isCursorInSketchCommandRange(
    ([id, artifact]) =>
      selectionRanges.codeBasedSelections.some(
        (selection) =>
-          Array.isArray(selection.range) &&
-          Array.isArray(artifact.range) &&
+          Array.isArray(selection?.range) &&
+          Array.isArray(artifact?.range) &&
          isOverlap(selection.range, artifact.range) &&
          (artifact.commandType === 'start_path' ||
            artifact.commandType === 'extend_path' ||
-            'close_path')
+            artifact.commandType === 'close_path')
      )
  )
-  return overlapingEntries.length === 1 && overlapingEntries[0][1].parentId
+  return overlapingEntries.length && overlapingEntries[0][1].parentId
    ? overlapingEntries[0][1].parentId
-    : false
+    : overlapingEntries.find(
+        ([, artifact]) => artifact.commandType === 'start_path'
+      )?.[0] || false
 }
--- a/src/hooks/useCodeEval.ts
+++ b/src/hooks/useCodeEval.ts
@ -1,156 +0,0 @@
-import { useEffect } from 'react'
-import { asyncParser } from '../lang/abstractSyntaxTree'
-import { _executor } from '../lang/executor'
-import { useStore } from '../useStore'
-import { KCLError } from '../lang/errors'
-
-// This recently moved out of app.tsx
-// and is our old way of thinking that whenever the code changes we need to re-execute, instead of
-// being more decisive about when and where we execute, its likey this custom hook will be
-// refactored away entirely at some point
-
-export function useCodeEval() {
-  const {
-    addLog,
-    addKCLError,
-    setAst,
-    setError,
-    setProgramMemory,
-    resetLogs,
-    resetKCLErrors,
-    setArtifactMap,
-    engineCommandManager,
-    highlightRange,
-    setHighlightRange,
-    setCursor2,
-    isStreamReady,
-    setIsExecuting,
-    defferedCode,
-  } = useStore((s) => ({
-    addLog: s.addLog,
-    defferedCode: s.defferedCode,
-    setAst: s.setAst,
-    setError: s.setError,
-    setProgramMemory: s.setProgramMemory,
-    resetLogs: s.resetLogs,
-    resetKCLErrors: s.resetKCLErrors,
-    setArtifactMap: s.setArtifactNSourceRangeMaps,
-    engineCommandManager: s.engineCommandManager,
-    highlightRange: s.highlightRange,
-    setHighlightRange: s.setHighlightRange,
-    setCursor2: s.setCursor2,
-    isStreamReady: s.isStreamReady,
-    addKCLError: s.addKCLError,
-    setIsExecuting: s.setIsExecuting,
-  }))
-  useEffect(() => {
-    if (!isStreamReady) return
-    if (!engineCommandManager) return
-    let unsubFn: any[] = []
-    const asyncWrap = async () => {
-      try {
-        if (!defferedCode) {
-          setAst({
-            start: 0,
-            end: 0,
-            body: [],
-            nonCodeMeta: {
-              noneCodeNodes: {},
-              start: null,
-            },
-          })
-          setProgramMemory({ root: {}, return: null })
-          engineCommandManager.endSession()
-          engineCommandManager.startNewSession()
-          return
-        }
-        const _ast = await asyncParser(defferedCode)
-        setAst(_ast)
-        resetLogs()
-        resetKCLErrors()
-        engineCommandManager.endSession()
-        engineCommandManager.startNewSession()
-        setIsExecuting(true)
-        const programMemory = await _executor(
-          _ast,
-          {
-            root: {
-              _0: {
-                type: 'UserVal',
-                value: 0,
-                __meta: [],
-              },
-              _90: {
-                type: 'UserVal',
-                value: 90,
-                __meta: [],
-              },
-              _180: {
-                type: 'UserVal',
-                value: 180,
-                __meta: [],
-              },
-              _270: {
-                type: 'UserVal',
-                value: 270,
-                __meta: [],
-              },
-            },
-            return: null,
-          },
-          engineCommandManager
-        )
-
-        const { artifactMap, sourceRangeMap } =
-          await engineCommandManager.waitForAllCommands(_ast, programMemory)
-        setIsExecuting(false)
-        if (programMemory !== undefined) {
-          setProgramMemory(programMemory)
-        }
-
-        setArtifactMap({ artifactMap, sourceRangeMap })
-        const unSubHover = engineCommandManager.subscribeToUnreliable({
-          event: 'highlight_set_entity',
-          callback: ({ data }) => {
-            if (data?.entity_id) {
-              const sourceRange = sourceRangeMap[data.entity_id]
-              setHighlightRange(sourceRange)
-            } else if (
-              !highlightRange ||
-              (highlightRange[0] !== 0 && highlightRange[1] !== 0)
-            ) {
-              setHighlightRange([0, 0])
-            }
-          },
-        })
-        const unSubClick = engineCommandManager.subscribeTo({
-          event: 'select_with_point',
-          callback: ({ data }) => {
-            if (!data?.entity_id) {
-              setCursor2()
-              return
-            }
-            const sourceRange = sourceRangeMap[data.entity_id]
-            setCursor2({ range: sourceRange, type: 'default' })
-          },
-        })
-        unsubFn.push(unSubHover, unSubClick)
-
-        setError()
-      } catch (e: any) {
-        setIsExecuting(false)
-        if (e instanceof KCLError) {
-          addKCLError(e)
-        } else {
-          setError('problem')
-          console.log(e)
-          addLog(e)
-        }
-      }
-    }
-    asyncWrap()
-    return () => {
-      unsubFn.forEach((fn) => fn())
-    }
-  }, [defferedCode, isStreamReady, engineCommandManager])
-}
--- a/src/hooks/useEngineConnectionSubscriptions.ts
+++ b/src/hooks/useEngineConnectionSubscriptions.ts
@ -0,0 +1,50 @@
+import { useEffect } from 'react'
+import { useStore } from 'useStore'
+
+export function useEngineConnectionSubscriptions() {
+  const {
+    engineCommandManager,
+    setCursor2,
+    setHighlightRange,
+    highlightRange,
+  } = useStore((s) => ({
+    engineCommandManager: s.engineCommandManager,
+    setCursor2: s.setCursor2,
+    setHighlightRange: s.setHighlightRange,
+    highlightRange: s.highlightRange,
+  }))
+  useEffect(() => {
+    if (!engineCommandManager) return
+
+    const unSubHover = engineCommandManager.subscribeToUnreliable({
+      event: 'highlight_set_entity',
+      callback: ({ data }) => {
+        if (data?.entity_id) {
+          const sourceRange =
+            engineCommandManager.sourceRangeMap[data.entity_id]
+          setHighlightRange(sourceRange)
+        } else if (
+          !highlightRange ||
+          (highlightRange[0] !== 0 && highlightRange[1] !== 0)
+        ) {
+          setHighlightRange([0, 0])
+        }
+      },
+    })
+    const unSubClick = engineCommandManager.subscribeTo({
+      event: 'select_with_point',
+      callback: ({ data }) => {
+        if (!data?.entity_id) {
+          setCursor2()
+          return
+        }
+        const sourceRange = engineCommandManager.sourceRangeMap[data.entity_id]
+        setCursor2({ range: sourceRange, type: 'default' })
+      },
+    })
+    return () => {
+      unSubHover()
+      unSubClick()
+    }
+  }, [engineCommandManager, setCursor2, setHighlightRange, highlightRange])
+}
--- a/src/hooks/useSetupEngineManager.ts
+++ b/src/hooks/useSetupEngineManager.ts
@ -12,11 +12,13 @@ export function useSetupEngineManager(
    setMediaStream,
    setIsStreamReady,
    setStreamDimensions,
+    executeCode,
  } = useStore((s) => ({
    setEngineCommandManager: s.setEngineCommandManager,
    setMediaStream: s.setMediaStream,
    setIsStreamReady: s.setIsStreamReady,
    setStreamDimensions: s.setStreamDimensions,
+    executeCode: s.executeCode,
  }))

  const streamWidth = streamRef?.current?.offsetWidth
@ -41,6 +43,9 @@ export function useSetupEngineManager(
      token,
    })
    setEngineCommandManager(eng)
+    eng.waitForReady.then(() => {
+      executeCode()
+    })
    return () => {
      eng?.tearDown()
    }
--- a/src/hooks/useToolbarGuards.ts
+++ b/src/hooks/useToolbarGuards.ts
@ -46,7 +46,7 @@ export function useConvertToVariable() {
        variableName
      )

-      updateAst(_modifiedAst)
+      updateAst(_modifiedAst, true)
    } catch (e) {
      console.log('e', e)
    }
--- a/src/lang/std/engineConnection.ts
+++ b/src/lang/std/engineConnection.ts
@ -908,14 +908,14 @@ export class EngineCommandManager {
  }
  private async fixIdMappings(ast: Program, programMemory: ProgramMemory) {
    /* This is a temporary solution since the cmd_ids that are sent through when
-    sending 'extend_path' ids are not used as the segment ids. 
+    sending 'extend_path' ids are not used as the segment ids.

    We have a way to back fill them with 'path_get_info', however this relies on one
    the sketchGroup array and the segements array returned from the server to be in
    the same length and order. plus it's super hacky, we first use the path_id to get
    the source range of the pipe expression then use the name of the variable to get
    the sketchGroup from programMemory.
-    
+
    I feel queezy about relying on all these steps to always line up.
    We have also had to pollute this EngineCommandManager class with knowledge of both the ast and programMemory
    We should get the cmd_ids to match with the segment ids and delete this method.
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -57,7 +57,7 @@ export function throttle<T>(
 }

 // takes a function and executes it after the wait time, if the function is called again before the wait time is up, the timer is reset
-export function defferExecution<T>(func: (args: T) => any, wait: number) {
+export function deferExecution<T>(func: (args: T) => any, wait: number) {
  let timeout: ReturnType<typeof setTimeout> | null
  let latestArgs: T

@ -66,7 +66,7 @@ export function defferExecution<T>(func: (args: T) => any, wait: number) {
    func(latestArgs)
  }

-  function deffered(args: T) {
+  function deferred(args: T) {
    latestArgs = args
    if (timeout) {
      clearTimeout(timeout)
@ -74,7 +74,7 @@ export function defferExecution<T>(func: (args: T) => any, wait: number) {
    timeout = setTimeout(later, wait)
  }

-  return deffered
+  return deferred
 }

 export function getNormalisedCoordinates({
--- a/src/useStore.ts
+++ b/src/useStore.ts
@ -4,6 +4,7 @@ import { addLineHighlight, EditorView } from './editor/highlightextension'
 import { parser_wasm } from './lang/abstractSyntaxTree'
 import { Program } from './lang/abstractSyntaxTreeTypes'
 import { getNodeFromPath } from './lang/queryAst'
+import { enginelessExecutor } from './lib/testHelpers'
 import {
  ProgramMemory,
  Position,
@ -13,13 +14,10 @@ import {
 } from './lang/executor'
 import { recast } from './lang/recast'
 import { EditorSelection } from '@codemirror/state'
-import {
-  ArtifactMap,
-  SourceRangeMap,
-  EngineCommandManager,
-} from './lang/std/engineConnection'
+import { EngineCommandManager } from './lang/std/engineConnection'
 import { KCLError } from './lang/errors'
-import { defferExecution } from 'lib/utils'
+import { deferExecution } from 'lib/utils'
+import { _executor } from './lang/executor'

 export type Selection = {
  type: 'default' | 'line-end' | 'line-mid'
@ -123,40 +121,37 @@ export interface StoreState {
  setGuiMode: (guiMode: GuiModes) => void
  logs: string[]
  addLog: (log: string) => void
-  resetLogs: () => void
+  setLogs: (logs: string[]) => void
  kclErrors: KCLError[]
  addKCLError: (err: KCLError) => void
+  setErrors: (errors: KCLError[]) => void
  resetKCLErrors: () => void
  ast: Program
  setAst: (ast: Program) => void
+  executeAst: (ast?: Program) => void
+  executeAstMock: (ast?: Program) => void
  updateAst: (
    ast: Program,
+    execute: boolean,
    optionalParams?: {
      focusPath?: PathToNode
      callBack?: (ast: Program) => void
    }
  ) => void
-  updateAstAsync: (ast: Program, focusPath?: PathToNode) => void
+  updateAstAsync: (
+    ast: Program,
+    reexecute: boolean,
+    focusPath?: PathToNode
+  ) => void
  code: string
-  defferedCode: string
  setCode: (code: string) => void
-  defferedSetCode: (code: string) => void
+  deferredSetCode: (code: string) => void
+  executeCode: (code?: string) => void
  formatCode: () => void
-  errorState: {
-    isError: boolean
-    error: string
-  }
-  setError: (error?: string) => void
  programMemory: ProgramMemory
  setProgramMemory: (programMemory: ProgramMemory) => void
  isShiftDown: boolean
  setIsShiftDown: (isShiftDown: boolean) => void
-  artifactMap: ArtifactMap
-  sourceRangeMap: SourceRangeMap
-  setArtifactNSourceRangeMaps: (a: {
-    artifactMap: ArtifactMap
-    sourceRangeMap: SourceRangeMap
-  }) => void
  engineCommandManager?: EngineCommandManager
  setEngineCommandManager: (engineCommandManager: EngineCommandManager) => void
  mediaStream?: MediaStream
@ -197,10 +192,13 @@ let pendingAstUpdates: number[] = []
 export const useStore = create<StoreState>()(
  persist(
    (set, get) => {
-      const setDefferedCode = defferExecution(
-        (code: string) => set({ defferedCode: code }),
-        600
-      )
+      // We defer this so that likely our ast has caught up to the code.
+      // If we are making changes that are not reflected in the ast, we
+      // should not be updating the ast.
+      const setDeferredCode = deferExecution((code: string) => {
+        set({ code })
+        get().executeCode(code)
+      }, 600)
      return {
        editorView: null,
        setEditorView: (editorView) => {
@ -214,6 +212,22 @@ export const useStore = create<StoreState>()(
            editorView.dispatch({ effects: addLineHighlight.of(selection) })
          }
        },
+        executeCode: async (code) => {
+          const result = await executeCode({
+            code: code || get().code,
+            lastAst: get().ast,
+            engineCommandManager: get().engineCommandManager,
+          })
+          if (!result.isChange) {
+            return
+          }
+          set({
+            ast: result.ast,
+            logs: result.logs,
+            kclErrors: result.errors,
+            programMemory: result.programMemory,
+          })
+        },
        setCursor: (selections) => {
          const { editorView } = get()
          if (!editorView) return
@ -243,7 +257,10 @@ export const useStore = create<StoreState>()(
            get().setCursor({
              otherSelections: currestSelections.otherSelections,
              codeBasedSelections: [
-                { range: [0, code.length - 1], type: 'default' },
+                {
+                  range: [0, code.length ? code.length - 1 : 0],
+                  type: 'default',
+                },
              ],
            })
            return
@ -277,8 +294,8 @@ export const useStore = create<StoreState>()(
            set((state) => ({ logs: [...state.logs, log] }))
          }
        },
-        resetLogs: () => {
-          set({ logs: [] })
+        setLogs: (logs) => {
+          set({ logs })
        },
        kclErrors: [],
        addKCLError: (e) => {
@ -287,6 +304,9 @@ export const useStore = create<StoreState>()(
        resetKCLErrors: () => {
          set({ kclErrors: [] })
        },
+        setErrors: (errors) => {
+          set({ kclErrors: errors })
+        },
        ast: {
          start: 0,
          end: 0,
@ -299,7 +319,47 @@ export const useStore = create<StoreState>()(
        setAst: (ast) => {
          set({ ast })
        },
-        updateAst: async (ast, { focusPath, callBack = () => {} } = {}) => {
+        executeAst: async (ast) => {
+          const _ast = ast || get().ast
+          if (!get().isStreamReady) return
+          const engineCommandManager = get().engineCommandManager!
+          if (!engineCommandManager) return
+
+          set({ isExecuting: true })
+          const { logs, errors, programMemory } = await executeAst({
+            ast: _ast,
+            engineCommandManager,
+          })
+          set({
+            programMemory,
+            logs,
+            kclErrors: errors,
+            isExecuting: false,
+          })
+        },
+        executeAstMock: async (ast) => {
+          const _ast = ast || get().ast
+          if (!get().isStreamReady) return
+          const engineCommandManager = get().engineCommandManager!
+          if (!engineCommandManager) return
+
+          const { logs, errors, programMemory } = await executeAst({
+            ast: _ast,
+            engineCommandManager,
+            useFakeExecutor: true,
+          })
+          set({
+            programMemory,
+            logs,
+            kclErrors: errors,
+            isExecuting: false,
+          })
+        },
+        updateAst: async (
+          ast,
+          reexecute,
+          { focusPath, callBack = () => {} } = {}
+        ) => {
          const newCode = recast(ast)
          const astWithUpdatedSource = parser_wasm(newCode)
          callBack(astWithUpdatedSource)
@ -307,7 +367,6 @@ export const useStore = create<StoreState>()(
          set({
            ast: astWithUpdatedSource,
            code: newCode,
-            defferedCode: newCode,
          })
          if (focusPath) {
            const { node } = getNodeFromPath<any>(
@ -328,24 +387,33 @@ export const useStore = create<StoreState>()(
              })
            })
          }
+
+          if (reexecute) {
+            // Call execute on the set ast.
+            get().executeAst(astWithUpdatedSource)
+          } else {
+            // When we don't re-execute, we still want to update the program
+            // memory with the new ast. So we will hit the mock executor
+            // instead.
+            get().executeAstMock(astWithUpdatedSource)
+          }
        },
-        updateAstAsync: async (ast, focusPath) => {
+        updateAstAsync: async (ast, reexecute, focusPath) => {
          // clear any pending updates
          pendingAstUpdates.forEach((id) => clearTimeout(id))
          pendingAstUpdates = []
          // setup a new update
          pendingAstUpdates.push(
            setTimeout(() => {
-              get().updateAst(ast, { focusPath })
+              get().updateAst(ast, reexecute, { focusPath })
            }, 100) as unknown as number
          )
        },
        code: '',
-        defferedCode: '',
-        setCode: (code) => set({ code, defferedCode: code }),
-        defferedSetCode: (code) => {
+        setCode: (code) => set({ code }),
+        deferredSetCode: (code) => {
          set({ code })
-          setDefferedCode(code)
+          setDeferredCode(code)
        },
        formatCode: async () => {
          const code = get().code
@ -353,20 +421,10 @@ export const useStore = create<StoreState>()(
          const newCode = recast(ast)
          set({ code: newCode, ast })
        },
-        errorState: {
-          isError: false,
-          error: '',
-        },
-        setError: (error = '') => {
-          set({ errorState: { isError: !!error, error } })
-        },
        programMemory: { root: {}, return: null },
        setProgramMemory: (programMemory) => set({ programMemory }),
        isShiftDown: false,
        setIsShiftDown: (isShiftDown) => set({ isShiftDown }),
-        artifactMap: {},
-        sourceRangeMap: {},
-        setArtifactNSourceRangeMaps: (maps) => set({ ...maps }),
        setEngineCommandManager: (engineCommandManager) =>
          set({ engineCommandManager }),
        setMediaStream: (mediaStream) => set({ mediaStream }),
@ -409,9 +467,165 @@ export const useStore = create<StoreState>()(
      partialize: (state) =>
        Object.fromEntries(
          Object.entries(state).filter(([key]) =>
-            ['code', 'defferedCode', 'openPanes'].includes(key)
+            ['code', 'openPanes'].includes(key)
          )
        ),
    }
  )
 )
+
+const defaultProgramMemory: ProgramMemory['root'] = {
+  _0: {
+    type: 'UserVal',
+    value: 0,
+    __meta: [],
+  },
+  _90: {
+    type: 'UserVal',
+    value: 90,
+    __meta: [],
+  },
+  _180: {
+    type: 'UserVal',
+    value: 180,
+    __meta: [],
+  },
+  _270: {
+    type: 'UserVal',
+    value: 270,
+    __meta: [],
+  },
+  PI: {
+    type: 'UserVal',
+    value: Math.PI,
+    __meta: [],
+  },
+}
+
+async function executeCode({
+  engineCommandManager,
+  code,
+  lastAst,
+}: {
+  code: string
+  lastAst: Program
+  engineCommandManager?: EngineCommandManager
+}): Promise<
+  | {
+      logs: string[]
+      errors: KCLError[]
+      programMemory: ProgramMemory
+      ast: Program
+      isChange: true
+    }
+  | { isChange: false }
+> {
+  let ast: Program
+  try {
+    ast = parser_wasm(code)
+  } catch (e) {
+    let errors: KCLError[] = []
+    let logs: string[] = [JSON.stringify(e)]
+    if (e instanceof KCLError) {
+      errors = [e]
+      logs = []
+      if (e.msg === 'file is empty') engineCommandManager?.endSession()
+    }
+    return {
+      isChange: true,
+      logs,
+      errors,
+      programMemory: {
+        root: {},
+        return: null,
+      },
+      ast: {
+        start: 0,
+        end: 0,
+        body: [],
+        nonCodeMeta: {
+          noneCodeNodes: {},
+          start: null,
+        },
+      },
+    }
+  }
+  // Check if the ast we have is equal to the ast in the storage.
+  // If it is, we don't need to update the ast.
+  if (!engineCommandManager || JSON.stringify(ast) === JSON.stringify(lastAst))
+    return { isChange: false }
+
+  const { logs, errors, programMemory } = await executeAst({
+    ast,
+    engineCommandManager,
+  })
+  return {
+    ast,
+    logs,
+    errors,
+    programMemory,
+    isChange: true,
+  }
+}
+
+async function executeAst({
+  ast,
+  engineCommandManager,
+  useFakeExecutor = false,
+}: {
+  ast: Program
+  engineCommandManager: EngineCommandManager
+  useFakeExecutor?: boolean
+}): Promise<{
+  logs: string[]
+  errors: KCLError[]
+  programMemory: ProgramMemory
+}> {
+  try {
+    if (!useFakeExecutor) {
+      engineCommandManager.endSession()
+      engineCommandManager.startNewSession()
+    }
+    const programMemory = await (useFakeExecutor
+      ? enginelessExecutor(ast, {
+          root: defaultProgramMemory,
+          return: null,
+        })
+      : _executor(
+          ast,
+          {
+            root: defaultProgramMemory,
+            return: null,
+          },
+          engineCommandManager
+        ))
+
+    await engineCommandManager.waitForAllCommands(ast, programMemory)
+    return {
+      logs: [],
+      errors: [],
+      programMemory,
+    }
+  } catch (e: any) {
+    if (e instanceof KCLError) {
+      return {
+        errors: [e],
+        logs: [],
+        programMemory: {
+          root: {},
+          return: null,
+        },
+      }
+    } else {
+      console.log(e)
+      return {
+        logs: [e],
+        errors: [],
+        programMemory: {
+          root: {},
+          return: null,
+        },
+      }
+    }
+  }
+}