research/statebuddy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

text edit dialog shows parser errors

Browse source
This commit is contained in:
Joeri Exelmans 2025-10-19 20:54:56 +02:00
parent 88dee7e3b9
commit ff32e6d000
3 changed files with 22 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/App/About.tsx
View file

@ -1,11 +1,10 @@
import logo from "../../artwork/logo.svg";
export function About() {
return <div style={{display: 'inline-block', backgroundColor: 'white', width: 500, padding: 4}}>
return <div style={{backgroundColor: 'white', width: 500, padding: 4}}>
<p><img src={logo}/></p>
<p>StateBuddy is a <a href="https://dl.acm.org/doi/10.1016/0167-6423(87)90035-9">statechart</a> editing, simulation, debugging and testing environment inspired by <a href="https://dl.acm.org/doi/10.1145/3417990.3421401">CouchEdit</a>.</p>
<p>StateBuddy is an <a target="_blank" href="https://deemz.org/git/research/statebuddy">open source</a> tool for <a target="_blank" href="https://dl.acm.org/doi/10.1016/0167-6423(87)90035-9">Statechart</a> editing, simulation, debugging and testing environment, inspired by <a target="_blank" href="https://dl.acm.org/doi/10.1145/3417990.3421401">CouchEdit</a>.</p>
<p>It was originally created for teaching Statecharts to university students, but likely is a useful tool for other purposes as well.</p>
<p>StateBuddy is <a href="https://deemz.org/git/research/statebuddy">open source</a>.</p>
<p>For commerical use, <a href="mailto:joeri.exelmans@gmail.com">e&#x2011;mail me</a> for permission.</p>
<p>Commercial use: <a href="mailto:joeri.exelmans@gmail.com">e&#x2011;mail me</a> for permission.</p>
</div>;
}

2
src/App/App.tsx
View file

@ -152,7 +152,7 @@ export function App() {
onMouseDown={() => setModal(null)}
style={{width: '100%', height: '100%', position:'absolute', textAlign: 'center', backgroundColor: 'rgba(127,127,127,0.5)' }}>
<div
style={{position: 'relative', top: '50%', transform: 'translateY(-50%)'}}>
style={{position: 'relative', top: '50%', transform: 'translateY(-50%)', textAlign: 'center', display: 'inline-block'}}>
<span onMouseDown={e => e.stopPropagation()}>
{modal}
</span>

26
src/App/TextDialog.tsx
View file

@ -1,5 +1,7 @@
import { Dispatch, ReactElement, SetStateAction, useState } from "react";
import { parse as parseLabel, SyntaxError } from "../statecharts/label_parser";
export function TextDialog(props: {setModal: Dispatch<SetStateAction<ReactElement|null>>, text: string, done: (newText: string|undefined) => void}) {
const [text, setText] = useState(props.text);
function onKeyDown(e: KeyboardEvent) {
@ -16,11 +18,21 @@ export function TextDialog(props: {setModal: Dispatch<SetStateAction<ReactElemen
}
e.stopPropagation();
}
return <span onKeyDown={onKeyDown} style={{backgroundColor:'white'}}>
<textarea style={{fontFamily: 'Roboto', width:500, height: 100}} onChange={e=>setText(e.target.value)}>{text}</textarea>
<br/>
<span style={{backgroundColor:'lightyellow'}}>
Tip: <kbd>Shift</kbd>+<kbd>Enter</kbd> to insert newline.
</span>
</span>;
let error = "";
try {
const parsed = parseLabel(text);
} catch (e) {
error = e.message;
}
return <div onKeyDown={onKeyDown} style={{backgroundColor:'white', padding: 4, width: 520}}>
Edit text label:<br/>
<textarea autoFocus style={{fontFamily: 'Roboto', width:500, height: 100}} onChange={e=>setText(e.target.value)}>{text}</textarea>
<br/>
<span style={{color: 'var(--error-color)'}}>{error}</span><br/>
<p><kbd>Enter</kbd> to confirm. <kbd>Escape</kbd> to cancel.
</p>
(Tip: <kbd>Shift</kbd>+<kbd>Enter</kbd> to insert newline.)
</div>;
}