Make it impossible to crash app while extruding (#2224)

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

src/components/CommandBar/CommandBarSelectionInput.tsx

@@ -3,13 +3,12 @@ import { useCommandsContext } from 'hooks/useCommandsContext'
 import { useKclContext } from 'lang/KclProvider'
 import { CommandArgument } from 'lib/commandTypes'
 import {
-  ResolvedSelectionType,
   canSubmitSelectionArg,
   getSelectionType,
   getSelectionTypeDisplayText,
 } from 'lib/selections'
 import { modelingMachine } from 'machines/modelingMachine'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { StateFrom } from 'xstate'
 
@@ -30,13 +29,13 @@ function CommandBarSelectionInput({
   const { commandBarState, commandBarSend } = useCommandsContext()
   const [hasSubmitted, setHasSubmitted] = useState(false)
   const selection = useSelector(arg.machineActor, selectionSelector)
-  const [selectionsByType, setSelectionsByType] = useState<
-    'none' | ResolvedSelectionType[]
-  >(
-    selection.codeBasedSelections[0]?.range[1] === code.length
+  const initSelectionsByType = useCallback(() => {
+    const selectionRangeEnd = selection.codeBasedSelections[0]?.range[1]
+    return !selectionRangeEnd || selectionRangeEnd === code.length
       ? 'none'
       : getSelectionType(selection)
-  )
+  }, [selection, code])
+  const selectionsByType = initSelectionsByType()
   const [canSubmitSelection, setCanSubmitSelection] = useState<boolean>(
     canSubmitSelectionArg(selectionsByType, arg)
   )
@@ -51,17 +50,14 @@ function CommandBarSelectionInput({
     inputRef.current?.focus()
   }, [selection, inputRef])
 
-  useEffect(() => {
-    setSelectionsByType(
-      selection.codeBasedSelections[0]?.range[1] === code.length
-        ? 'none'
-        : getSelectionType(selection)
-    )
-  }, [selection])
-
   // Fast-forward through this arg if it's marked as skippable
   // and we have a valid selection already
   useEffect(() => {
+    console.log('selection input effect', {
+      selectionsByType,
+      canSubmitSelection,
+      arg,
+    })
     setCanSubmitSelection(canSubmitSelectionArg(selectionsByType, arg))
     const argValue = commandBarState.context.argumentsToSubmit[arg.name]
     if (canSubmitSelection && arg.skip && argValue === undefined) {

src/components/ModelingMachineProvider.tsx

@@ -267,10 +267,12 @@ export const ModelingMachineProvider = ({
         'has valid extrude selection': ({ selectionRanges }) => {
           // A user can begin extruding if they either have 1+ faces selected or nothing selected
           // TODO: I believe this guard only allows for extruding a single face at a time
-          if (selectionRanges.codeBasedSelections.length < 1) return false
           const isPipe = isSketchPipe(selectionRanges)
 
-          if (isSelectionLastLine(selectionRanges, codeManager.code))
+          if (
+            selectionRanges.codeBasedSelections.length === 0 ||
+            isSelectionLastLine(selectionRanges, codeManager.code)
+          )
             return true
           if (!isPipe) return false
 

src/lib/selections.ts

@@ -420,7 +420,13 @@ export function getSelectionTypeDisplayText(
   const selectionsByType = getSelectionType(selection)
 
   return (selectionsByType as Exclude<typeof selectionsByType, 'none'>)
-    .map(([type, count]) => `${count} ${type}${count > 1 ? 's' : ''}`)
+    .map(
+      // Hack for showing "face" instead of "extrude-wall" in command bar text
+      ([type, count]) =>
+        `${count} ${type.replace('extrude-wall', 'face')}${
+          count > 1 ? 's' : ''
+        }`
+    )
     .join(', ')
 }
 

src/lib/useCalculateKclExpression.ts

@@ -31,9 +31,11 @@ export function useCalculateKclExpression({
   newVariableInsertIndex: number
   setNewVariableName: (a: string) => void
 } {
-  const { programMemory } = useKclContext()
+  const { programMemory, code } = useKclContext()
   const { context } = useModelingContext()
-  const selectionRange = context.selectionRanges.codeBasedSelections[0].range
+  const selectionRange:
+    | (typeof context.selectionRanges.codeBasedSelections)[number]['range']
+    | undefined = context.selectionRanges.codeBasedSelections[0]?.range
   const inputRef = useRef<HTMLInputElement>(null)
   const [availableVarInfo, setAvailableVarInfo] = useState<
     ReturnType<typeof findAllPreviousVariables>
@@ -67,7 +69,7 @@ export function useCalculateKclExpression({
     } else {
       setIsNewVariableNameUnique(true)
     }
-  }, [newVariableName])
+  }, [programMemory, newVariableName])
 
   useEffect(() => {
     if (!programMemory || !selectionRange) return
@@ -81,8 +83,8 @@ export function useCalculateKclExpression({
 
   useEffect(() => {
     const execAstAndSetResult = async () => {
-      const code = `const __result__ = ${value}`
-      const ast = parse(code)
+      const _code = `const __result__ = ${value}`
+      const ast = parse(_code)
       const _programMem: any = { root: {}, return: null }
       availableVarInfo.variables.forEach(({ key, value }) => {
         _programMem.root[key] = { type: 'userVal', value, __meta: [] }
@@ -111,7 +113,7 @@ export function useCalculateKclExpression({
       setCalcResult('NAN')
       setValueNode(null)
     })
-  }, [value, availableVarInfo])
+  }, [value, availableVarInfo, code, kclManager.programMemory])
 
   return {
     valueNode,