diff --git a/src/component/app/App.tsx b/src/component/app/App.tsx index d53ca4e..9a099f4 100644 --- a/src/component/app/App.tsx +++ b/src/component/app/App.tsx @@ -1,15 +1,17 @@ import { useEffect, useMemo, useState } from 'react'; +import { extendedEnv } from './environment'; import { GlobalContext } from '../../context/GlobalContext'; -import { deepEvalExpr } from '../../eval/deep_eval'; import { inferType, scoreTypeInfo } from '../../eval/infer_type'; import { ExprBlock, type ExprBlockState } from '../expr/ExprBlock'; -import { TypeInfoBlock } from '../other/Type'; -import { Value } from '../other/Value'; import { actionShortcuts } from './actions'; import { biggerExample, emptySet, factorial, higherOrder, higherOrder2Params, inc, initialEditorState, lambda2Params, nonEmptyEditorState, pushBool, setOfListOfBool, tripleFunctionCallEditorState } from "./configurations"; -import { extendedEnv } from './environment'; import './App.css'; +import { evalExpr } from '../../eval/eval'; +import { Value } from '../other/Value'; +import { Type, TypeInfoBlock } from '../other/Type'; +import { deepEvalExpr } from '../../eval/deep_eval'; + const examples: [string, ExprBlockState][] = [ ["empty editor" , initialEditorState ], @@ -138,11 +140,10 @@ export function App() { // static evalution const typeInfo = useMemo(() => inferType(currentState, extendedEnv), [currentState]); - - // dynamic evalution + // dynamic evalutions + const evalResult = evalExpr(currentState, extendedEnv); const deepEvalResult = deepEvalExpr(currentState, extendedEnv); - - const err = typeInfo.err || deepEvalResult.err; + console.log({deepEvalResult}); const onCopy = () => { const serialized = JSON.stringify(currentState); @@ -215,7 +216,7 @@ export function App() { /> = :: diff --git a/src/component/expr/CallBlock.tsx b/src/component/expr/CallBlock.tsx index 462d1e0..7ce443b 100644 --- a/src/component/expr/CallBlock.tsx +++ b/src/component/expr/CallBlock.tsx @@ -41,7 +41,6 @@ function nestedInputProperties({state, setState, score, typeInfo, evalResult}: C setState(state => ({...state, input: callback(state.input)})); }; const onInputCancel = () => { - setState(state => /*addFocusRightMost*/(state.fn)); // we become our function }; const scoreInput = (inputSuggestion: ExprBlockState) => { @@ -53,9 +52,7 @@ function nestedInputProperties({state, setState, score, typeInfo, evalResult}: C export function CallBlock(props: CallBlockProps) { const globalContext = useContext(GlobalContext); const addParam = getActions(globalContext, props.setState).c; - const err = props.typeInfo.err || props.evalResult.err; - - return + return @@ -69,12 +66,6 @@ export function CallBlock(props: CallBlockProps) { - {(err !== undefined) && - - - {err.message.trim()} - - } ; } diff --git a/src/component/expr/ExprBlock.css b/src/component/expr/ExprBlock.css index 07aa347..750df93 100644 --- a/src/component/expr/ExprBlock.css +++ b/src/component/expr/ExprBlock.css @@ -14,7 +14,7 @@ .errorMessage { color: darkred; background-color: pink; - /* margin-top: 4px; */ + margin-top: 4px; z-index: 10; font-family: var(--my-monospace-font); white-space-collapse: preserve; diff --git a/src/component/expr/InputBlock.tsx b/src/component/expr/InputBlock.tsx index f3ac3dd..7fcad90 100644 --- a/src/component/expr/InputBlock.tsx +++ b/src/component/expr/InputBlock.tsx @@ -84,7 +84,7 @@ const computeSuggestions = ( return result; } -export function InputBlock({ state, setState, score, onCancel, typeInfo, evalResult }: InputBlockProps) { +export function InputBlock({ state, setState, score, onCancel, typeInfo }: InputBlockProps) { const {text, focus} = state; const globalContext = useContext(GlobalContext); const env = typeInfo.env; @@ -144,7 +144,7 @@ export function InputBlock({ state, setState, score, onCancel, typeInfo, evalRes }, }; - const err = typeInfo.err || evalResult.err; + const err = typeInfo.err || evalExpr(state, env).err; return <> ): number return ref.current?.selectionStart || 0; } +// Move caret all the way to the right in the currently focused element +function setRightMostCaretPosition(elem) { + const range = document.createRange(); + range.selectNode(elem); + if (elem.lastChild) { // if no text is entered, there is no lastChild + range.setStart(elem.lastChild, elem.textContent.length); + range.setEnd(elem.lastChild, elem.textContent.length); + const selection = window.getSelection(); + selection?.removeAllRanges(); + selection?.addRange(range); + } +} + +function focusNextElement() { + const editable = Array.from(document.querySelectorAll('input.editable')); + const index = editable.indexOf(document.activeElement); + const nextElem = editable[index+1]; + if (nextElem) { + nextElem.focus(); + } +} + +function focusPrevElement() { + const editable = Array.from(document.querySelectorAll('input.editable')); + const index = editable.indexOf(document.activeElement); + const prevElem = editable[index-1] + if (prevElem) { + prevElem.focus(); + setRightMostCaretPosition(prevElem); + } +} + export function Input({placeholder, text, suggestion, onTextChange, onEnter, onCancel, extraHandlers, children}: InputProps) { const ref = useRef(null); const [focus, setFocus] = useState<"yes"|"hide"|"no">("no"); diff --git a/src/util/dom_trickery.ts b/src/util/dom_trickery.ts deleted file mode 100644 index 3187da2..0000000 --- a/src/util/dom_trickery.ts +++ /dev/null @@ -1,32 +0,0 @@ - -// Move caret all the way to the right in the currently focused element -export function setRightMostCaretPosition(elem) { - const range = document.createRange(); - range.selectNode(elem); - if (elem.lastChild) { // if no text is entered, there is no lastChild - range.setStart(elem.lastChild, elem.textContent.length); - range.setEnd(elem.lastChild, elem.textContent.length); - const selection = window.getSelection(); - selection?.removeAllRanges(); - selection?.addRange(range); - } -} - -export function focusNextElement() { - const editable = Array.from(document.querySelectorAll('input.editable')); - const index = editable.indexOf(document.activeElement); - const nextElem = editable[index + 1]; - if (nextElem) { - nextElem.focus(); - } -} - -export function focusPrevElement() { - const editable = Array.from(document.querySelectorAll('input.editable')); - const index = editable.indexOf(document.activeElement); - const prevElem = editable[index - 1]; - if (prevElem) { - prevElem.focus(); - setRightMostCaretPosition(prevElem); - } -}