diff --git a/src/App.tsx b/src/App.tsx index 9c70a72..f4067cb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -82,25 +82,64 @@ const tripleFunctionCallEditorState: EditorState = { } export function App() { - // const [state, setState] = useState(initialEditorState); - // const [state, setState] = useState(nonEmptyEditorState); - const [state, setState] = useState(tripleFunctionCallEditorState); + const [history, setHistory] = useState([initialEditorState]); + // const [history, setHistory] = useState([nonEmptyEditorState]); + // const [history, setHistory] = useState([tripleFunctionCallEditorState]); + + const [future, setFuture] = useState([]); + + const pushHistory = (s: EditorState) => { + console.log('pushHistory'); + setHistory(history.concat([s])); + setFuture([]); + }; + + const onUndo = () => { + setFuture(future.concat(history.at(-1)!)); // add + setHistory(history.slice(0,-1)); // remove + }; + const onRedo = () => { + setHistory(history.concat(future.at(-1)!)); // add + setFuture(future.slice(0,-1)); // remove + }; + + const onKeyDown = (e) => { + if (e.key === "Z" && e.ctrlKey) { + if (e.shiftKey) { + if (future.length > 0) { + onRedo(); + } + } + else { + if (history.length > 1) { + onUndo(); + } + } + e.preventDefault(); + } + }; + useEffect(() => { - window['APP_STATE'] = state; + window['APP_STATE'] = history; // console.log("EDITOR STATE:", state); - }, [state]); + }, [history]); + + useEffect(() => { + window.onkeydown = onKeyDown; + }, []); return ( <>
- {/* Header content */} + +
{console.log("toplevel resolved")}} onCancel={() => {console.log("toplevel canceled")}} /> diff --git a/tsconfig.app.json b/tsconfig.app.json index 811071c..aa04116 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -3,7 +3,7 @@ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "target": "ES2020", "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], + "lib": ["ES2022", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true,