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

decent progress

Browse source
This commit is contained in:
Joeri Exelmans 2025-05-11 22:54:23 +02:00
parent e901fc3f76
commit a9ae4f9888
14 changed files with 318 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/App.tsx
View file

@ -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>

24
src/CallBlock.css
View file

@ -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;

113
src/CallBlock.tsx
View file

@ -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>;
// }

8
src/Editor.css Normal file
View file

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

113
src/Editor.tsx
View file

@ -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) {
let onResolve;
switch (state.kind) {
case "input":
onResolve = (resolved: InputBlockState) => {
console.log('resolved!', state, resolved);
if (resolved) {
const type = getType(resolved.resolved);
if (getSymbol(type) === symbolFunction) {
console.log('function!');
// we were InputBlock
// now we become FunctionBlock
export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
const [proxyState, setProxyState] = useState<'unresolved'|'command'|'resolved'>('unresolved');
const onMyResolve = (editorState: EditorState) => {
setState(editorState);
if (editorState.resolved) {
setProxyState('command');
}
else {
setProxyState('unresolved');
}
}
// 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!');
// console.log('editor state:', state);
// }
}
return <InputBlock state={state} setState={setState} filter={dontFilter} onResolve={onResolve} />;
};
const renderBlock = () => {
switch (state.kind) {
case "input":
return <InputBlock state={state} setState={setState} filter={dontFilter} onResolve={onMyResolve} onCancel={onCancel} />;
case "call":
onResolve = (d: Dynamic) => {}
return <CallBlock state={state} setState={setState} onResolve={onResolve} />;
return <CallBlock state={state} setState={setState} onResolve={onMyResolve} />;
case "let":
return <></>;
case "lambda":
return <></>;
}
}
// function DynamicBlock({env, name, dynamic}) {
// const type = getType(dynamic);
// if (getSymbol(type) === symbolFunction) {
// return <FunctionBlock env={env} name={name} funDynamic={dynamic} />;
// }
// else return <>{getInst(dynamic).toString()} :: <Type type={type}/></>;
// }
// function InputBlock({env, done, type}) {
// const filterInputType = ([_, dynamic]) => {
// 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>
// </>;
// }
return <>
{renderBlock()}
{
(state.resolved)
? <div className="typeSignature">
:: <Type type={getType(state.resolved)} />
{ (proxyState === 'command')
? <input autoFocus={true} className="editable command" placeholder="<enter command>" onKeyDown={onCommand} value=""/>
: <></>
}
</div>
: <></>
}
</>;
}

37
src/InputBlock.css
View file

@ -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; */
/* top: 20px; */
border: solid 1px lightgrey;
border: solid 1px dodgerblue;
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;

66
src/InputBlock.tsx
View file

@ -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);
setResolved(found); // may be undefined
if (ref.current) {
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="editable" ref={ref} contentEditable="plaintext-only" onInput={onInput} onKeyDown={onKeyDown}
onFocus={() => setHaveFocus(true)}
onBlur={() => {
// hacky, but couldn't find another way:
// setTimeout(resetFocus, 0);
setHaveFocus(false);
} } style={{ height: 19 }}></span>
<span className="">
<input ref={ref} placeholder="start typing..." autoFocus={true} className="editable" value={text} onInput={onInput} onKeyDown={onKeyDown} onFocus={() => setHaveFocus(true)} onBlur={() => setHaveFocus(false)}/>
<span className="text-block suggest">{singleSuggestion}</span>
</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>
: <></>;
}

9
src/Value.css Normal file
View file

@ -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;
}

54
src/Value.tsx Normal file
View file

@ -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}}/></>);
}

10
src/index.css
View file

@ -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;
}

4
src/util/dom_trickery.ts
View file

@ -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) {

5
src/util/extra.ts
View file

@ -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;
}

4
tsconfig.app.json
View file

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