decent progress

src/App.tsx

@@ -3,11 +3,11 @@ import { useEffect, useState } from 'react';
 import './App.css'
 import { Editor, initialEditorState, type EditorState } from './Editor'
 
-
 export function App() {
   const [state, setState] = useState<EditorState>(initialEditorState);
 
   useEffect(() => {
+    window['APP_STATE'] = state;
     // console.log("EDITOR STATE:", state);
   }, [state]);
 
@@ -18,7 +18,12 @@ export function App() {
       </header>
 
       <main>
-        <Editor state={state} setState={setState}></Editor>
+        <Editor
+          state={state}
+          setState={setState}
+          onResolve={() => {console.log("toplevel resolved")}}
+          onCancel={() => {console.log("toplevel canceled")}}
+        />
       </main>
 
       <footer>

src/CallBlock.css

@@ -16,43 +16,23 @@
   border: solid 10px transparent;
   border-left-color: rgba(242, 253, 146);
   margin-left: 0px;
+  /* z-index: 1; */
 }
 
 .inputParam {
   height: 20px;
   margin-right: 20px;
-  /* vertical-align: ; */
-  /* margin-left: 0; */
   display: inline-block;
-  /* border: solid 1px black; */
   background-color: rgba(242, 253, 146);
-  /* border-radius: 10px; */
 }
 
-
-
 .typeAnnot {
   display: inline-block;
   vertical-align: top;
 }
 
-
-
-
-/* .outputParam:before {
-  content: "";
-  position: absolute;
-  width: 0px;
-  height: 0px;
-  margin-left: -28px;
-  margin-top: 0px;
-  border-style: solid;
-  border-color: orange;
-  border-width: 14px;
-  border-left-color: transparent;
-} */
-
 .outputParam {
+  text-align: left;
   vertical-align: top;
   /* margin-left: 28px; */
   padding: 0px;

src/CallBlock.tsx

@@ -1,75 +1,100 @@
+import { apply, getType, getInst } from "dope2";
 import type { Dynamic, State2Props } from "./util/extra";
 import { Editor, type EditorState } from "./Editor";
 
 import "./CallBlock.css";
+import { useEffect } from "react";
+import { Type } from "./Type";
+import { Value } from "./Value";
+import { focusPrevElement } from "./util/dom_trickery";
 
 export interface CallBlockState {
   kind: "call";
   env: any;
   fn: EditorState;
   input: EditorState;
+  resolved: undefined | Dynamic;
+  rollback: EditorState;
 }
 
 interface CallBlockProps extends State2Props<CallBlockState> {
-  onResolve: (d: Dynamic) => void;
+  onResolve: (resolved: EditorState) => void;
+}
+
+export function CallBlock({ state: {kind, env, fn, input, resolved, rollback }, setState, onResolve }: CallBlockProps) {
+  const setResolved = (resolved: Dynamic) => {
+    setState({kind, env, fn, input, resolved, rollback});
+  }
+
+  const makeTheCall = (input, fn) => {
+    console.log('makeTheCall...')
+    try {
+      const outputResolved = apply(input.resolved)(fn.resolved);
+      setResolved(outputResolved);
+      console.log("onResolve callblock..")
+      onResolve({
+        kind, env, fn, input, resolved: outputResolved, rollback
+      });
+    }
+    catch (e) {
+      console.log('makeTheCall:', e);
+    }
   }
 
-export function CallBlock({ state: {kind, env, fn, input}, setState, onResolve }: CallBlockProps) {
   const setFn = (fn: EditorState) => {
-    setState({kind, env, fn, input});
+    setState({kind, env, fn, input, resolved, rollback});
   }
   const setInput = (input: EditorState) => {
-    setState({kind, env, fn, input});
+    setState({kind, env, fn, input, resolved, rollback});
   }
+  const onFnResolve = (fnState) => {
+    console.log('my fn resolved')
+    if (input.resolved) {
+      makeTheCall(input, fnState);
+    }
+    else {
+      setFn(fnState);
+    }
+  }
+  const onInputResolve = (inputState) => {
+    console.log('my input resolved')
+    if (fn.resolved) {
+      makeTheCall(inputState, fn);
+    }
+    else {
+      // setInput(inputState);
+      setResolved(undefined);
+      onResolve({
+        kind, env, fn, input: inputState, resolved: undefined, rollback
+      });
+    }
+  }
+  const onFnCancel = () => {
+
+  }
+  const onInputCancel = () => {
+    // we become what we were before we became a CallBlock
+    if (rollback) {
+      setState(rollback);
+      focusPrevElement();
+    }
+  }
+
   return <span className="functionBlock">
     <div className="functionName">
     &#119891;&#119899;&nbsp;
-      <Editor state={fn} setState={setFn}/>
+      <Editor state={fn} setState={setFn}
+        onResolve={onFnResolve} onCancel={onFnCancel}/>
     </div>
     <div className="functionParams">
       <div className="outputParam">
       <div className="inputParam">
-        <Editor state={input} setState={setInput} />
+        <Editor state={input} setState={setInput} onResolve={onInputResolve} onCancel={onInputCancel} />
       </div>
-      result
+      { resolved
+        ? <Value dynamic={resolved} />
+        : <></> }
       </div>
     </div>
   </span>;
 }
-
-// function FunctionBlock({env, done, name, funDynamic}) {
-//   const functionType = getType(funDynamic);
-//   const inType = functionType.params[0](functionType);
-//   const [outDynamic, setOutDynamic] = useState<any>(null);
-//   const [input, setInput] = useState<any>(null);
-//   const gotInput = (name, inDynamic) => {
-//     setInput([name, inDynamic]);
-//     const outDynamic = apply(inDynamic)(funDynamic);
-//     setOutDynamic(outDynamic);
-//     // propagate result up
-//     done(outDynamic);
-//   };
-//   return <span className="functionBlock">
-//     <div className="functionName">
-//     &#119891;&#119899;&nbsp;
-//       {name}
-//       {/* <Type type={functionType}/> */}
-//     </div>
-//     <div className="functionParams">
-//       <div className="outputParam">
-//       <div className="inputParam">
-//         {
-//           (input === null)
-//             ? <InputBlock env={env} done={gotInput} type={inType} />
-//             : <DynamicBlock env={env} name={input[0]} dynamic={input[1]}/>
-//         }
-//       </div>
-//       {
-//           (input === null)
-//             ? <>&nbsp;</>
-//             : <DynamicBlock env={env} name="" dynamic={outDynamic} />
-//         }
-//       </div>
-//     </div>
-//   </span>;
-// }

src/Editor.css

@@ -0,0 +1,8 @@
+.typeSignature {
+  display: inline-block;
+  /* vertical-align:; */
+}
+
+.command {
+  width: 136px;
+}

src/Editor.tsx

@@ -3,6 +3,11 @@ import { getSymbol, getType, module2Env, ModuleStd, symbolFunction } from "dope2
 import { InputBlock, type InputBlockState } from "./InputBlock";
 import { type Dynamic, type State2Props } from "./util/extra";
 import { CallBlock, type CallBlockState } from "./CallBlock";
+import { useEffect, useState } from "react";
+import { Type } from "./Type";
+
+import "./Editor.css"
+import { focusNextElement } from "./util/dom_trickery";
 
 interface LetInBlockState {
   kind: "let";
@@ -10,12 +15,17 @@ interface LetInBlockState {
   name: string;
   value: EditorState;
   inner: EditorState;
+  resolved: undefined | Dynamic;
+  rollback?: EditorState;
 }
 
 interface LambdaBlockState {
   kind: "lambda";
+  env: any;
   paramName: string;
   expr: EditorState;
+  resolved: undefined | Dynamic;
+  rollback?: EditorState;
 }
 
 export type EditorState =
@@ -29,72 +39,73 @@ export const initialEditorState: EditorState = {
   env: module2Env(ModuleStd),
   text: "",
   resolved: undefined,
+  rollback: undefined,
 };
 
-type EditorProps = State2Props<EditorState>;
+interface EditorProps extends State2Props<EditorState> {
+  onResolve: (state: EditorState) => void;
+  onCancel: () => void;
+}
 
 const dontFilter = () => true;
 
-export function Editor({state, setState}: EditorProps) {
+export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
-  let onResolve;
+  const [proxyState, setProxyState] = useState<'unresolved'|'command'|'resolved'>('unresolved');
-  switch (state.kind) {
+  const onMyResolve = (editorState: EditorState) => {
-    case "input":
+    setState(editorState);
-      onResolve = (resolved: InputBlockState) => {
+    if (editorState.resolved) {
-        console.log('resolved!', state, resolved);
+      setProxyState('command');
-        if (resolved) {
+    }
-          const type = getType(resolved.resolved);
+    else {
-          if (getSymbol(type) === symbolFunction) {
+      setProxyState('unresolved');
-            console.log('function!');
+    }
-            // we were InputBlock
+  }
-            // now we become FunctionBlock
+  // const onMyCancel
+  const onCommand = (e: React.KeyboardEvent) => {
+    const type = getType(state.resolved);
+    if (e.key === "c" && getSymbol(type) === symbolFunction) {
+      e.preventDefault();
+      // we become CallBlock
       setState({
         kind: "call",
         env: state.env,
-              fn: resolved,
+        fn: state,
         input: initialEditorState,
-            })
+        resolved: undefined,
+        rollback: state,
+      });
+      setProxyState('resolved');
     }
+    if (e.key === "u" || e.key === "Enter") {
+      setProxyState('resolved');
+      onResolve(state);
     }
-        // const type = getType(state.resolved);
+  };
-        // if (getSymbol(type) === symbolFunction) {
+
-        //   console.log('function!');
+  const renderBlock = () => {
-        //   console.log('editor state:', state);
+    switch (state.kind) {
-        // }
+      case "input":
-      }
+        return <InputBlock state={state} setState={setState} filter={dontFilter} onResolve={onMyResolve} onCancel={onCancel} />;
-      return <InputBlock state={state} setState={setState} filter={dontFilter} onResolve={onResolve} />;
       case "call":
-      onResolve = (d: Dynamic) => {}
+        return <CallBlock state={state} setState={setState} onResolve={onMyResolve} />;
-      return <CallBlock state={state} setState={setState} onResolve={onResolve} />;
       case "let":
         return <></>;
       case "lambda":
         return <></>;
     }  
   }
-
+  return <>
-// function DynamicBlock({env, name, dynamic}) {
+    {renderBlock()}
-//   const type = getType(dynamic);
+    {
-//   if (getSymbol(type) === symbolFunction) {
+      (state.resolved)
-//     return <FunctionBlock env={env} name={name} funDynamic={dynamic} />;
+      ? <div className="typeSignature">
-//   }
+          :: <Type type={getType(state.resolved)} />
-//   else return <>{getInst(dynamic).toString()} :: <Type type={type}/></>;
+          { (proxyState === 'command')
-// }
+            ? <input autoFocus={true} className="editable command" placeholder="<enter command>" onKeyDown={onCommand} value=""/>
-
+            : <></>
-// function InputBlock({env, done, type}) {
+          }
-//   const filterInputType = ([_, dynamic]) => {
+        </div>
-//     try {
+      : <></>
-//       unify(type, getType(dynamic));
+    }
-//       return true;
+  </>;
-//     } catch (e) {
+}
-//       if (!(e instanceof UnifyError)) {
-//         console.error(e);
-//       }
-//       return false;
-//     }
-//   }
-//   return <>
-//     <span className="typeAnnot"><InputBlock env={env} done={done} filter={filterInputType} /></span>
-//     <span className="typeAnnot">:: <Type type={type}/></span>
-//   </>;
-// }
-

src/InputBlock.css

@@ -1,14 +1,28 @@
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&display=swap');
+
 .suggest {
+  margin-left: -3.5px;
+  margin-right: 5px;
   color: #aaa;
+  min-width: 30px;
+
+  font-size: 13pt;
+  font-family: "Inconsolata", monospace;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+  font-variation-settings: "wdth" 100;
+
 }
 .suggestions { 
+  text-align: left;
   position: absolute;
-  /* display: inline-block; */
+  border: solid 1px dodgerblue;
-  /* top: 20px; */
-  border: solid 1px lightgrey;
   cursor: pointer;
   max-height: calc(100vh - 44px);
   overflow: scroll;
+  z-index: 10;
+  background-color: white;
 }
 .selected {
   background-color: dodgerblue;
@@ -17,6 +31,23 @@
 .editable {
   outline: 0px solid transparent;
   display: inline-block;
+  border: 0;
+  /* box-sizing: border-box; */
+  /* width: ; */
+  /* border: 1px black solid; */
+  /* border-style: dashed none dashed; */
+
+  margin-left: 4px;
+  margin-right: 0;
+
+  font-size: 13pt;
+  font-family: "Inconsolata", monospace;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+  font-variation-settings: "wdth" 100;
+
+  background-color: transparent;
 }
 .border-around-input {
   border: 1px solid black;

src/InputBlock.tsx

@@ -7,25 +7,28 @@ import { Type } from "./Type";
 
 import "./InputBlock.css";
 import type { Dynamic, State2Props } from "./util/extra";
+import type { EditorState } from "./Editor";
 
 export interface InputBlockState {
   kind: "input";
   env: any;
   text: string;
   resolved: undefined | Dynamic;
+  rollback?: EditorState;
 }
 
 interface InputBlockProps extends State2Props<InputBlockState> {
   filter: (ls: any[]) => boolean;
   onResolve: (state: InputBlockState) => void;
+  onCancel: () => void;
 }
 
-export function InputBlock({ state: {kind, env, text, resolved}, setState, filter, onResolve }: InputBlockProps) {
+export function InputBlock({ state: {kind, env, text, resolved, rollback}, setState, filter, onResolve, onCancel }: InputBlockProps) {
   const ref = useRef<any>(null);
   useEffect(() => {
     ref.current?.focus();
     if (ref.current) {
-      ref.current.textContent = text;
+      // ref.current.textContent = text;
     }
   }, []);
 
@@ -33,10 +36,10 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
   const [haveFocus, setHaveFocus] = useState(false); // whether to render suggestions or not
 
   const setText = (text: string) => {
-    setState({kind, env, text, resolved});
+    setState({kind, env, text, resolved, rollback});
   }
   const setResolved = (resolved: Dynamic) => {
-    setState({kind, env, text, resolved});
+    setState({kind, env, text, resolved, rollback});
   }
 
   const singleSuggestion = trie.growPrefix(env.name2dyn)(text);
@@ -53,28 +56,45 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
 
   useEffect(() => {
     setI(0); // reset
-    const found = trie.get(env.name2dyn)(text);
+    if (ref.current) {
-    setResolved(found); // may be undefined
+      ref.current.style.width = `${text.length === 0 ? 140 : (text.length*8.7)}px`;
+    }
   }, [text]);
 
-
+  const onSelectSuggestion = ([name, dynamic]) => {
-  const onSelectSuggestion = ([name, _dynamic]) => {
+    console.log(name);
     // setText(name);
     // ref.current.textContent = name;
     // setRightMostCaretPosition(ref.current);
     // setI(0);
+    // setResolved(dynamic);
+    console.log("onResolve inputblock..")
     onResolve({
-      env,
       kind: "input",
-      resolved: _dynamic,
+      env,
       text: name,
+      resolved: dynamic,
+      rollback,
     });
   };
 
   const onInput = e => {
-    setText(e.target.textContent);
+    setText(e.target.value);
+    if (resolved) {
+      onResolve({
+        kind: "input",
+        env,
+        text: e.target.value,
+        resolved: undefined,
+        rollback,
+      });
+    }
   };
 
+  const getCaretPosition = () => {
+    return ref.current.selectionStart;
+  }
+
   const onKeyDown = (e: React.KeyboardEvent) => {
     const fns = {
       Tab: () => {
@@ -87,7 +107,7 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
           if (singleSuggestion.length > 0) {
             const newText = text + singleSuggestion;
             setText(newText);
-            ref.current.textContent = newText;
+            // ref.current.textContent = newText;
             setRightMostCaretPosition(ref.current);
             e.preventDefault();  
           }
@@ -117,33 +137,33 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
         onSelectSuggestion(suggestions[i]);
         e.preventDefault();
       },
+      Backspace: () => {
+        if (text.length === 0) {
+          onCancel();
+          e.preventDefault();
+        }
+      }
     };
     fns[e.key]?.();
   };
 
   return <span>
-    <span className="border-around-input">
+    <span className="">
-      <span className="editable" ref={ref} contentEditable="plaintext-only" onInput={onInput} onKeyDown={onKeyDown}
+      <input ref={ref} placeholder="start typing..." autoFocus={true} className="editable" value={text} onInput={onInput} onKeyDown={onKeyDown} onFocus={() => setHaveFocus(true)} onBlur={() => setHaveFocus(false)}/>
-      onFocus={() => setHaveFocus(true)}
+      <span className="text-block suggest">{singleSuggestion}</span>
-      onBlur={() => {
+      </span>
-        // hacky, but couldn't find another way:
-        // setTimeout(resetFocus, 0);
-        setHaveFocus(false);
-      } } style={{ height: 19 }}></span>
       {
         (haveFocus)
         ? <Suggestions suggestions={suggestions} onSelect={onSelectSuggestion} i={i} setI={setI} />
         : <></>
       }
-    <span className="text-block suggest">{singleSuggestion}</span>
-    </span>
   </span>;
 }
 
 function Suggestions({ suggestions, onSelect, i, setI }) {
   return (suggestions.length > 0) ?
     <div className="suggestions">
-      {suggestions.map(([name, dynamic], j) => <div key={`${j}_${name}`} className={i === j ? "selected" : ""} onClick={() => setI(j)} onDoubleClick={() => onSelect(suggestions[i])}>{name} :: <Type type={getType(dynamic)} /></div>)}
+      {suggestions.map(([name, dynamic], j) => <div key={`${j}_${name}`} className={i === j ? "selected" : ""} onClick={() => onSelect(suggestions[i])}>{name} :: <Type type={getType(dynamic)} /></div>)}
     </div>
     : <></>;
 }

src/Value.css

@@ -0,0 +1,9 @@
+.value {
+  border: 1px solid black;
+  border-radius: 10px;
+  margin-left: 2px;
+  margin-right: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
+  background-color: white;
+}

src/Value.tsx

@@ -0,0 +1,54 @@
+import {getType, getInst, getSymbol, Double, Int, symbolFunction, symbolProduct, symbolSum, symbolDict, symbolSet, symbolList, eqType, match} from "dope2";
+
+import "./Value.css";
+
+export function Value({dynamic}) {
+  const type = getType(dynamic);
+  const inst = getInst(dynamic);
+  if (eqType(type)(Double)) {
+    return <ValueDouble val={inst}/>;
+  }
+  if (eqType(type)(Int)) {
+    return <ValueInt val={inst}/>;
+  }
+  const symbol = getSymbol(type);
+  switch (symbol) {
+    case symbolFunction:
+      return <ValueFunction/>;
+    //   return <BinaryType type={type} cssClass="functionType" infix="&rarr;" prefix="" suffix=""/>;
+    // case symbolProduct:
+    //   return <BinaryType type={type} cssClass="productType" infix="&#10799;" prefix="" suffix=""/>;
+    case symbolSum:
+      return <ValueSum val={inst} leftType={type.params[0](type)} rightType={type.params[1](type)}/>;
+    // case symbolDict:
+    //   return <BinaryType type={type} cssClass="dictType" infix="&rArr;" prefix="{" suffix="}"/>;
+    // case symbolSet:
+    //   return <UnaryType type={type} cssClass="setType" prefix="{" suffix="}" />;
+    case symbolList:
+      return <List val={inst} elemType={type.params[0](type)} />;
+  
+    default:
+      return <>don't know how to show value</>;
+  }
+}
+
+function ValueDouble({val}) {
+  return <span className="value">{val.toString()}</span>;
+}
+function ValueInt({val}) {
+  return <span className="value">{val.toString()}</span>;
+}
+function ValueFunction() {
+  return <>&#119891;&#119899;&nbsp;</>;
+}
+// function Sum({val, elemType}) {
+//   return 
+// }
+function List({val, elemType}) {
+  return <span className="listType">[{val.map((v, i) => <Value dynamic={{i:v, t:elemType}}/>)}]</span>;
+}
+function ValueSum({val, leftType, rightType}) {
+  return match(val)
+    (l => <>L <Value dynamic={{i:l, t:leftType}}/></>)
+    (r => <>R <Value dynamic={{i:r, t:rightType}}/></>);
+}

src/index.css

@@ -1,3 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+
 body {
   margin: 0;
+  font-family: "Roboto", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-variation-settings:
+    "wdth" 100;
+
 }

src/util/dom_trickery.ts

@@ -33,13 +33,13 @@ export function setRightMostCaretPosition(elem) {
 }
 
 export function focusNextElement() {
-  const editable = Array.from<any>(document.querySelectorAll('[contenteditable]'));
+  const editable = Array.from<any>(document.querySelectorAll('input'));
   const index = editable.indexOf(document.activeElement);
   editable[index+1]?.focus();
 }
 
 export function focusPrevElement() {
-  const editable = Array.from<any>(document.querySelectorAll('[contenteditable]'));
+  const editable = Array.from<any>(document.querySelectorAll('input'));
   const index = editable.indexOf(document.activeElement);
   const prevElem = editable[index-1]
   if (prevElem) {

src/util/extra.ts

@@ -1,3 +1,5 @@
+import type { EditorState } from "../Editor";
+
 export interface Dynamic {
   i: any;
   t: any;
@@ -6,5 +8,6 @@ export interface Dynamic {
 export interface State2Props<T> {
   state: T;
   // setState: (callback: (state: T) => T) => void;
-  setState: (state: T) => void;
+  // setState: (state: T) => void;
+  setState: (state: EditorState) => void;
 }

tsconfig.app.json

@@ -20,8 +20,8 @@
 
     /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
-    "noUnusedParameters": true,
+    "noUnusedParameters": false,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true