Replace values with variable helper (#84)

* Refactor getNodePathFromSourceRange

getNodePathFromSourceRange wouldn't go as deep as it should have,
stopping at pipe expressions, when it should have followed as deep
into the ast as possible.

The fact that it stopped early then had other part of the code base that
expected this behaviour and it effected a lot, so a rather large refactor

* overhaul of getNodePathFromSourceRange

* quick fix for moreNodePathFromSourceRange

* minor bugs in moreNodePathFromSourceRange

* couple more tests

* add moveValueIntoNewVariable

* add UI for replacing valuse with variable

* update button text

src/components/AvailableVarsHelpers.tsx

@@ -188,12 +188,14 @@ export const CreateNewVariable = ({
   setNewVariableName,
   shouldCreateVariable,
   setShouldCreateVariable,
+  showCheckbox = true,
 }: {
   isNewVariableNameUnique: boolean
   newVariableName: string
   setNewVariableName: (a: string) => void
   shouldCreateVariable: boolean
   setShouldCreateVariable: (a: boolean) => void
+  showCheckbox?: boolean
 }) => {
   return (
     <>
@@ -204,14 +206,16 @@ export const CreateNewVariable = ({
         Create new variable
       </label>
       <div className="mt-1 flex flex-1">
-        <input
-          type="checkbox"
-          className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md font-mono pl-1 flex-shrink"
-          checked={shouldCreateVariable}
-          onChange={(e) => {
-            setShouldCreateVariable(e.target.checked)
-          }}
-        />
+        {showCheckbox && (
+          <input
+            type="checkbox"
+            className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md font-mono pl-1 flex-shrink"
+            checked={shouldCreateVariable}
+            onChange={(e) => {
+              setShouldCreateVariable(e.target.checked)
+            }}
+          />
+        )}
         <input
           type="text"
           disabled={!shouldCreateVariable}

src/components/SetVarNameModal.tsx

@@ -0,0 +1,86 @@
+import { Dialog, Transition } from '@headlessui/react'
+import { Fragment, useState } from 'react'
+import { useCalc, CreateNewVariable } from './AvailableVarsHelpers'
+
+export const SetVarNameModal = ({
+  isOpen,
+  onResolve,
+  onReject,
+  valueName,
+}: {
+  isOpen: boolean
+  onResolve: (a: { variableName?: string }) => void
+  onReject: (a: any) => void
+  value: number
+  valueName: string
+}) => {
+  const { isNewVariableNameUnique, newVariableName, setNewVariableName } =
+    useCalc({ value: '', initialVariableName: valueName })
+
+  return (
+    <Transition appear show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={onReject}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black bg-opacity-25" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Title
+                  as="h3"
+                  className="text-lg font-medium leading-6 text-gray-900 capitalize"
+                >
+                  Set {valueName}
+                </Dialog.Title>
+
+                <CreateNewVariable
+                  setNewVariableName={setNewVariableName}
+                  newVariableName={newVariableName}
+                  isNewVariableNameUnique={isNewVariableNameUnique}
+                  shouldCreateVariable={true}
+                  setShouldCreateVariable={() => {}}
+                />
+                <div className="mt-4">
+                  <button
+                    type="button"
+                    disabled={!isNewVariableNameUnique}
+                    className={`inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${
+                      !isNewVariableNameUnique
+                        ? 'opacity-50 cursor-not-allowed'
+                        : ''
+                    }`}
+                    onClick={() =>
+                      onResolve({
+                        variableName: newVariableName,
+                      })
+                    }
+                  >
+                    Add variable
+                  </button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  )
+}

src/components/Toolbar/ConvertVariable.tsx

@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react'
+import { create } from 'react-modal-promise'
+import { useStore } from '../../useStore'
+import { isNodeSafeToReplace } from '../../lang/queryAst'
+import { SetVarNameModal } from '../SetVarNameModal'
+import { moveValueIntoNewVariable } from '../../lang/modifyAst'
+
+const getModalInfo = create(SetVarNameModal as any)
+
+export const ConvertToVariable = () => {
+  const { guiMode, selectionRanges, ast, programMemory, updateAst } = useStore(
+    (s) => ({
+      guiMode: s.guiMode,
+      ast: s.ast,
+      updateAst: s.updateAst,
+      selectionRanges: s.selectionRanges,
+      programMemory: s.programMemory,
+    })
+  )
+  const [enableAngLen, setEnableAngLen] = useState(false)
+  useEffect(() => {
+    if (!ast) return
+
+    const { isSafe, value } = isNodeSafeToReplace(ast, selectionRanges[0])
+    const canReplace = isSafe && value.type !== 'Identifier'
+    const isOnlyOneSelection = selectionRanges.length === 1
+
+    const _enableHorz = canReplace && isOnlyOneSelection
+    setEnableAngLen(_enableHorz)
+  }, [guiMode, selectionRanges])
+
+  return (
+    <button
+      onClick={async () => {
+        if (!ast) return
+        try {
+          const { variableName } = await getModalInfo({
+            valueName: 'var',
+          } as any)
+
+          const { modifiedAst: _modifiedAst } = moveValueIntoNewVariable(
+            ast,
+            programMemory,
+            selectionRanges[0],
+            variableName
+          )
+
+          updateAst(_modifiedAst)
+        } catch (e) {
+          console.log('e', e)
+        }
+      }}
+      className={`border m-1 px-1 rounded text-xs ${
+        enableAngLen ? 'bg-gray-50 text-gray-800' : 'bg-gray-200 text-gray-400'
+      }`}
+      disabled={!enableAngLen}
+    >
+      ConvertToVariable
+    </button>
+  )
+}

src/components/Toolbar/SetAngleLength.tsx

@@ -34,7 +34,7 @@ export const SetAngleLength = ({
       programMemory: s.programMemory,
     })
   )
-  const [enableHorz, setEnableHorz] = useState(false)
+  const [enableAngLen, setEnableAngLen] = useState(false)
   const [transformInfos, setTransformInfos] = useState<TransformInfo[]>()
   useEffect(() => {
     if (!ast) return
@@ -42,7 +42,8 @@ export const SetAngleLength = ({
       getNodePathFromSourceRange(ast, selectionRange)
     )
     const nodes = paths.map(
-      (pathToNode) => getNodeFromPath<Value>(ast, pathToNode).node
+      (pathToNode) =>
+        getNodeFromPath<Value>(ast, pathToNode, 'CallExpression').node
     )
     const isAllTooltips = nodes.every(
       (node) =>
@@ -54,7 +55,7 @@ export const SetAngleLength = ({
     setTransformInfos(theTransforms)
 
     const _enableHorz = isAllTooltips && theTransforms.every(Boolean)
-    setEnableHorz(_enableHorz)
+    setEnableAngLen(_enableHorz)
   }, [guiMode, selectionRanges])
   if (guiMode.mode !== 'sketch') return null
 
@@ -102,9 +103,9 @@ export const SetAngleLength = ({
         }
       }}
       className={`border m-1 px-1 rounded text-xs ${
-        enableHorz ? 'bg-gray-50 text-gray-800' : 'bg-gray-200 text-gray-400'
+        enableAngLen ? 'bg-gray-50 text-gray-800' : 'bg-gray-200 text-gray-400'
       }`}
-      disabled={!enableHorz}
+      disabled={!enableAngLen}
     >
       {angleOrLength}
     </button>