research/dope2-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

nicer, nested rendering when currying

Browse source
This commit is contained in:
Joeri Exelmans 2025-05-12 16:26:25 +02:00
parent f75d0641b4
commit 8744bad0b8
9 changed files with 144 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/CallBlock.css
View file

@ -23,18 +23,32 @@
content: "";
position: absolute;
border: solid 10px transparent;
border-left-color: rgba(242, 253, 146);
border-left-color: rgb(242, 253, 146);
margin-left: 0px;
/* z-index: 1; */
}
.inputParam {
/* height: 20px; */
margin-right: 20px;
display: inline-block;
background-color: rgba(242, 253, 146);
background-color: rgb(242, 253, 146);
}
.inputParam .inputParam {
background-color: rgb(180, 248, 214);
}
.inputParam .inputParam:after {
border-left-color: rgb(180, 248, 214);
}
.inputParam .inputParam .inputParam {
background-color: rgb(153, 212, 214);
}
.inputParam .inputParam .inputParam:after {
border-left-color: rgb(153, 212, 214);
}
.typeAnnot {
display: inline-block;
vertical-align: top;

133
src/CallBlock.tsx
View file

@ -8,24 +8,35 @@ import { Type } from "./Type";
import { Value } from "./Value";
import { focusPrevElement } from "./util/dom_trickery";
export interface CallBlockState {
export interface CallBlockState<
FnState=EditorState,
InputState=EditorState,
> {
kind: "call";
env: any;
fn: EditorState;
input: EditorState;
fn: FnState;
input: InputState;
resolved: undefined | Dynamic;
}
interface CallBlockProps extends State2Props<CallBlockState> {
interface CallBlockProps<
FnState=EditorState,
InputState=EditorState,
> extends State2Props<CallBlockState<FnState,InputState>> {
onResolve: (resolved: EditorState) => void;
}
export function CallBlock({ state: {kind, env, fn, input, resolved }, setState, onResolve }: CallBlockProps) {
function headlessCallBlock({state: {kind, env, fn, input, resolved }, setState, onResolve}: CallBlockProps) {
const [unifyError, setUnifyError] = useState<UnifyError | undefined>(undefined);
const setFn = (fn: EditorState) => {
setState({kind, env, fn, input, resolved});
}
const setInput = (input: EditorState) => {
setState({kind, env, fn, input, resolved});
}
const setResolved = (resolved?: Dynamic) => {
setState({kind, env, fn, input, resolved});
}
const makeTheCall = (input, fn) => {
console.log('makeTheCall...')
try {
@ -46,14 +57,7 @@ export function CallBlock({ state: {kind, env, fn, input, resolved }, setState,
kind, env, fn, input, resolved: undefined
})
}
}
const setFn = (fn: EditorState) => {
setState({kind, env, fn, input, resolved});
}
const setInput = (input: EditorState) => {
setState({kind, env, fn, input, resolved});
}
};
const onFnResolve = (fnState) => {
console.log('my fn resolved')
if (input.resolved) {
@ -66,7 +70,7 @@ export function CallBlock({ state: {kind, env, fn, input, resolved }, setState,
kind, env, fn: fnState, input, resolved: undefined
});
}
}
};
const onInputResolve = (inputState) => {
console.log('my input resolved')
if (fn.resolved) {
@ -79,47 +83,86 @@ export function CallBlock({ state: {kind, env, fn, input, resolved }, setState,
kind, env, fn, input: inputState, resolved: undefined
});
}
}
};
const onFnCancel = () => {
setState(input);
}
const onInputCancel = () => {
setState(fn);
}
const filterCompatibleInputs = ([_name, dynamic]: [string, Dynamic]) => {
if (fn.resolved) {
try {
assignFn(getType(fn.resolved), getType(dynamic));
} catch (e) {
if (!(e instanceof UnifyError)) {
throw e;
}
return false;
}
}
return true;
// const filterCompatibleInputs = ([_name, dynamic]: [string, Dynamic]) => {
// if (fn.resolved) {
// try {
// assignFn(getType(fn.resolved), getType(dynamic));
// } catch (e) {
// if (!(e instanceof UnifyError)) {
// throw e;
// }
// return false;
// }
// }
// return true;
// }
return {unifyError, setFn, setInput, onFnResolve, onInputResolve, onFnCancel, onInputCancel};
}
export function CallBlock({ state, setState, onResolve }: CallBlockProps) {
const {unifyError, setFn, setInput, onFnResolve, onInputResolve, onFnCancel, onInputCancel}
= headlessCallBlock({ state, setState, onResolve });
return <span className={"functionBlock" + (unifyError ? " unifyError" : "")}>
<div className="functionName">
&#119891;&#119899;&nbsp;
<Editor state={fn} setState={setFn}
onResolve={onFnResolve} onCancel={onFnCancel}/>
</div>
<FunctionHeader fn={state.fn}/>
<div className="functionParams">
<div className="outputParam">
<div className="inputParam">
<Editor state={input} setState={setInput} onResolve={onInputResolve} onCancel={onInputCancel} />
</div>
{ resolved
? <Value dynamic={resolved} />
: <></> }
{ unifyError
? <>{unifyError.toString()}</>
: <></>
}
{/* Sequence of input parameters */}
<InputParams fn={state.fn} input={state.input} setInput={setInput}
onInputResolve={onInputResolve} onInputCancel={onInputCancel} />
{/* Output (or Error) */}
{state.resolved && <Value dynamic={state.resolved} />}
{unifyError && unifyError.toString()}
</div>
</div>
</span>;
}
function FunctionHeader({ fn }) {
if (fn.kind === "call") {
// if the function we're calling is itself the result of a function call,
// then we are anonymous, and so we don't draw a function name
// recurse:
return <FunctionHeader fn={fn.fn} />;
}
else {
// end of recursion - draw function name
return <div className="functionName">
&#119891;&#119899;&nbsp;
<Editor state={fn} setState={() => {/*todo*/}}
onResolve={() => {}} onCancel={() => {/*todo*/}}/>
</div>;
}
}
function InputParams({ fn, input, setInput, onInputResolve, onInputCancel }) {
return <div className="inputParam">
{(fn.kind === "call") &&
// if the function we're calling is itself the result of a function call,
// then we render its input parameter nested in our own input parameter box, which is way more readable
// Input(s) of the function we're calling:
<InputParams
fn={fn.fn}
input={fn.input}
setInput={() => {/*todo*/}}
onInputResolve={() => {/*todo*/}}
onInputCancel={() => {/*todo*/}}/>
}
{/* Our own input */}
<Editor
state={input}
setState={setInput}
onResolve={onInputResolve}
onCancel={onInputCancel} />
</div>;
};

20
src/Editor.tsx
View file

@ -1,4 +1,4 @@
import { getSymbol, getType, module2Env, ModuleStd, symbolFunction } from "dope2";
import { getSymbol, getType, module2Env, ModuleStd, symbolFunction, getDefaultTypeParser } from "dope2";
import { InputBlock, type InputBlockState } from "./InputBlock";
import { type Dynamic, type State2Props } from "./util/extra";
@ -16,7 +16,6 @@ interface LambdaBlockState {
paramName: string;
expr: EditorState;
resolved: undefined | Dynamic;
rollback?: EditorState;
}
export type EditorState =
@ -25,12 +24,14 @@ export type EditorState =
| LetInBlockState
| LambdaBlockState;
const mkType = getDefaultTypeParser();
export const initialEditorState: EditorState = {
kind: "input",
env: module2Env(ModuleStd),
env: module2Env(ModuleStd.concat([
["functionWith3Params", {i: i=>j=>k=>i+j+k, t: mkType("Int->Int->Int->Int")}],
])),
text: "",
resolved: undefined,
rollback: undefined,
};
interface EditorProps extends State2Props<EditorState> {
@ -84,7 +85,6 @@ export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
fn: state,
input: initialEditorState,
resolved: undefined,
rollback: state,
});
return;
}
@ -97,7 +97,6 @@ export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
fn: initialEditorState,
input: state,
resolved: undefined,
rollback: state,
});
return;
}
@ -116,7 +115,6 @@ export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
name: "",
value: state,
resolved: undefined,
rollback: state,
});
return;
}
@ -141,7 +139,13 @@ export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
? <div className="typeSignature">
:: <Type type={getType(state.resolved)} />
{ (needCommand)
? <input autoFocus={true} className="editable command" placeholder="<enter command>" onKeyDown={onCommand} value=""/>
? <input
spellCheck={false}
autoFocus={true}
className="editable command"
placeholder="<enter command>"
onKeyDown={onCommand}
value=""/>
: <></>
}
</div>

2
src/InputBlock.css
View file

@ -22,6 +22,8 @@
display: block;
text-align: left;
position: absolute;
margin-top: 7px;
margin-left: 4px;
border: solid 1px dodgerblue;
cursor: pointer;
max-height: calc(100vh - 44px);

30
src/InputBlock.tsx
View file

@ -8,14 +8,12 @@ import { Type } from "./Type";
import "./InputBlock.css";
import type { Dynamic, State2Props } from "./util/extra";
import type { EditorState } from "./Editor";
import { ShowIf } from "./ShowIf";
export interface InputBlockState {
kind: "input";
env: any;
text: string;
resolved: undefined | Dynamic;
rollback?: EditorState;
}
interface InputBlockProps extends State2Props<InputBlockState> {
@ -24,7 +22,7 @@ interface InputBlockProps extends State2Props<InputBlockState> {
onCancel: () => void;
}
export function InputBlock({ state: {kind, env, text, resolved, rollback}, setState, filter, onResolve, onCancel }: InputBlockProps) {
export function InputBlock({ state: {kind, env, text, resolved}, setState, filter, onResolve, onCancel }: InputBlockProps) {
const ref = useRef<any>(null);
useEffect(() => {
ref.current?.focus();
@ -34,10 +32,10 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
const [haveFocus, setHaveFocus] = useState(false); // whether to render suggestions or not
const setText = (text: string) => {
setState({kind, env, text, resolved, rollback});
setState({kind, env, text, resolved});
}
const setResolved = (resolved: Dynamic) => {
setState({kind, env, text, resolved, rollback});
setState({kind, env, text, resolved});
}
const singleSuggestion = trie.growPrefix(env.name2dyn)(text);
@ -60,7 +58,6 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
}, [text]);
const onSelectSuggestion = ([name, dynamic]) => {
console.log(name);
// setText(name);
// ref.current.textContent = name;
// setRightMostCaretPosition(ref.current);
@ -72,7 +69,6 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
env,
text: name,
resolved: dynamic,
rollback,
});
};
@ -84,7 +80,6 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
env,
text: e.target.value,
resolved: undefined,
rollback,
});
}
};
@ -151,6 +146,16 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
return <span>
<span className="">
{/* Dropdown suggestions */}
{haveFocus &&
<span style={{display:'inline-block'}}>
<Suggestions
suggestions={suggestions}
onSelect={onSelectSuggestion}
i={i} setI={setI} />
</span>
}
{/* Input box */}
<input ref={ref}
placeholder="start typing..."
className="editable"
@ -159,15 +164,10 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
onKeyDown={onKeyDown}
onFocus={() => setHaveFocus(true)}
onBlur={() => setHaveFocus(false)}
/>
spellCheck={false}/>
{/* Single 'grey' suggestion */}
<span className="text-block suggest">{singleSuggestion}</span>
</span>
<ShowIf cond={haveFocus}>
<Suggestions
suggestions={suggestions}
onSelect={onSelectSuggestion}
i={i} setI={setI} />
</ShowIf>
</span>;
}

3
src/LetInBlock.tsx
View file

@ -9,7 +9,6 @@ export interface LetInBlockState {
value: EditorState;
inner: EditorState;
resolved: undefined | Dynamic;
rollback?: EditorState;
}
interface LetInBlockProps extends State2Props<LetInBlockState> {
@ -17,6 +16,6 @@ interface LetInBlockProps extends State2Props<LetInBlockState> {
}
export function LetInBlock({env, name, value, inner, resolved, rollback, onResolve}) {
export function LetInBlock({env, name, value, inner, resolved, onResolve}) {
}

9
src/ShowIf.tsx
View file

@ -1,9 +0,0 @@
// syntactic sugar
export function ShowIf({cond, children}) {
if (cond) {
return <>{children}</>;
}
else {
return <></>;
}
}

6
src/Type.css
View file

@ -6,6 +6,12 @@
.type {
margin:1px;
display: inline-block;
font-family: "Roboto", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "wdth" 100;
}
.functionType {

8
src/index.css
View file

@ -7,12 +7,6 @@ body {
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-variation-settings: "wdth" 100;
}
:focus-within:not(body) {
/* outline: 2px solid black; */
/* background-color: aqua; */
}