diff --git a/src/component/app/App.tsx b/src/component/app/App.tsx index 9a099f4..d53ca4e 100644 --- a/src/component/app/App.tsx +++ b/src/component/app/App.tsx @@ -1,17 +1,15 @@ 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 ], @@ -140,10 +138,11 @@ export function App() { // static evalution const typeInfo = useMemo(() => inferType(currentState, extendedEnv), [currentState]); - // dynamic evalutions - const evalResult = evalExpr(currentState, extendedEnv); + + // dynamic evalution const deepEvalResult = deepEvalExpr(currentState, extendedEnv); - console.log({deepEvalResult}); + + const err = typeInfo.err || deepEvalResult.err; const onCopy = () => { const serialized = JSON.stringify(currentState); @@ -216,7 +215,7 @@ export function App() { /> = :: diff --git a/src/component/expr/CallBlock.tsx b/src/component/expr/CallBlock.tsx index 7ce443b..462d1e0 100644 --- a/src/component/expr/CallBlock.tsx +++ b/src/component/expr/CallBlock.tsx @@ -41,6 +41,7 @@ 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) => { @@ -52,7 +53,9 @@ function nestedInputProperties({state, setState, score, typeInfo, evalResult}: C export function CallBlock(props: CallBlockProps) { const globalContext = useContext(GlobalContext); const addParam = getActions(globalContext, props.setState).c; - return + const err = props.typeInfo.err || props.evalResult.err; + + return
@@ -66,6 +69,12 @@ 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 750df93..07aa347 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 7fcad90..f3ac3dd 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 }: InputBlockProps) { +export function InputBlock({ state, setState, score, onCancel, typeInfo, evalResult }: 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 }: Input }, }; - const err = typeInfo.err || evalExpr(state, env).err; + const err = typeInfo.err || evalResult.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");