From 20a36825d451c046a9075a900845c09e90523c45 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Sun, 19 Oct 2025 19:21:17 +0200 Subject: [PATCH] better looks --- src/App/AST.css | 31 ++++++++++++++++++++++++++++++- src/App/App.tsx | 10 +++++++++- src/App/BottomPanel.css | 2 ++ src/App/BottomPanel.tsx | 2 +- src/App/RTHistory.tsx | 13 +++++++------ src/App/ShowAST.tsx | 11 ++++++++++- src/statecharts/parser.ts | 24 ++++++++++++------------ 7 files changed, 71 insertions(+), 22 deletions(-) diff --git a/src/App/AST.css b/src/App/AST.css index b95fe4f..9f571ba 100644 --- a/src/App/AST.css +++ b/src/App/AST.css @@ -17,4 +17,33 @@ details { color: black; width: fit-content; border-radius: 10px; -} \ No newline at end of file +} + +.outputEvent { + border: 1px black solid; + border-radius: 6px; + margin-left: 4px; + padding-left: 2px; + padding-right: 2px; + background-color: rgb(230, 249, 255); +} + +.activeState { + border: rgb(192, 125, 0); + background-color:rgb(255, 251, 244); + filter: drop-shadow( 0px 0px 3px rgba(192, 125, 0, 0.856)); + border-radius: 6px; + margin-left: 4px; + padding-left: 2px; + padding-right: 2px; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 0; + margin-bottom: -3px; + padding: 0; +} diff --git a/src/App/App.tsx b/src/App/App.tsx index 15b54b8..bfebb73 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -12,7 +12,7 @@ import "./App.css"; import { Box, Stack } from "@mui/material"; import { TopPanel } from "./TopPanel"; import { RTHistory } from "./RTHistory"; -import { ShowAST } from "./ShowAST"; +import { ShowAST, ShowOutputEvents } from "./ShowAST"; import { TraceableError } from "../statecharts/parser"; import { getKeyHandler } from "./shortcut_handler"; import { BottomPanel } from "./BottomPanel"; @@ -142,6 +142,8 @@ export function App() { const highlightTransitions = (rtIdx === undefined) ? [] : rt[rtIdx].firedTransitions; + console.log(ast); + return {/* Top bar */} + + {/* Everything below the top bar */} + {/* main */} + {/* right sidebar */} +
diff --git a/src/App/BottomPanel.css b/src/App/BottomPanel.css index bbe185e..124d58f 100644 --- a/src/App/BottomPanel.css +++ b/src/App/BottomPanel.css @@ -5,5 +5,7 @@ } .bottom { + border-top: 1px lightgrey solid; background-color: lightyellow; + /* background-color: rgb(255, 251, 244); */ } \ No newline at end of file diff --git a/src/App/BottomPanel.tsx b/src/App/BottomPanel.tsx index f72f8f0..ab78100 100644 --- a/src/App/BottomPanel.tsx +++ b/src/App/BottomPanel.tsx @@ -6,7 +6,7 @@ import "./BottomPanel.css"; import head from "../head.svg" ; export function BottomPanel(props: {errors: TraceableError[]}) { - const [greeting, setGreeting] = useState(<> "Welcome to StateBuddy, buddy!"); + const [greeting, setGreeting] = useState( "Welcome to StateBuddy, buddy!"); useEffect(() => { setTimeout(() => { diff --git a/src/App/RTHistory.tsx b/src/App/RTHistory.tsx index 19887d6..c88780c 100644 --- a/src/App/RTHistory.tsx +++ b/src/App/RTHistory.tsx @@ -21,13 +21,14 @@ export function RTHistory({rt, rtIdx, ast, setRTIdx, setTime, refRightSideBar}: return
{rt.map((r, idx) => <> +
gotoRt(idx, r.simtime)}> -
({formatTime(r.simtime)}, {r.inputEvent || ""})
+
{formatTime(r.simtime)}, {r.inputEvent || ""}
- {r.outputEvents.length>0 &&
- {r.outputEvents.map((e:RaisedEvent) => '^'+e.name).join(', ')} -
} + {r.outputEvents.length>0 && <>^ + {r.outputEvents.map((e:RaisedEvent) => {e.name})} + }
)}
; } @@ -43,8 +44,8 @@ function ShowEnvironment(props: {environment: Environment}) { function ShowMode(props: {mode: Mode, statechart: Statechart}) { const activeLeafs = getActiveLeafs(props.mode, props.statechart); - return
mode: {[...activeLeafs].map(uid => - stateDescription(props.statechart.uid2State.get(uid)!)).join(", ")}
; + return
{[...activeLeafs].map(uid => + {stateDescription(props.statechart.uid2State.get(uid)!)})}
; } function getActiveLeafs(mode: Mode, sc: Statechart) { diff --git a/src/App/ShowAST.tsx b/src/App/ShowAST.tsx index 30c2547..0a5208e 100644 --- a/src/App/ShowAST.tsx +++ b/src/App/ShowAST.tsx @@ -25,7 +25,7 @@ export function ShowExpr(props: {expr: Expression}) { export function ShowAction(props: {action: Action}) { if (props.action.kind === "raise") { - return <>^{props.action.event}; + return <>^{props.action.event}; } else if (props.action.kind === "assignment") { return <>{props.action.lhs} = ;; @@ -59,3 +59,12 @@ export function ShowAST(props: {root: ConcreteState | PseudoState, transitions: } } + +export function ShowOutputEvents(props: {outputEvents: Set}) { + return
+ out: + {[...props.outputEvents].map(eventName => { + return <>{eventName} ; + })} +
; +} diff --git a/src/statecharts/parser.ts b/src/statecharts/parser.ts index 2500762..6ab4ac6 100644 --- a/src/statecharts/parser.ts +++ b/src/statecharts/parser.ts @@ -286,18 +286,18 @@ export function parseStatechart(state: VisualEditorState, conns: Connections): [ } } - // // raise-actions - // for (const action of parsed.actions) { - // if (action.kind === "raise") { - // const {event} = action; - // if (event.startsWith("_")) { - // internalEvents.add(event); - // } - // else { - // outputEvents.add(event); - // } - // } - // } + // raise-actions + for (const action of parsed.actions) { + if (action.kind === "raise") { + const {event} = action; + if (event.startsWith("_")) { + // internalEvents.add(event); + } + else { + outputEvents.add(event); + } + } + } // collect variables variables = variables.union(findVariables(parsed.guard));