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

simple execution works

Browse source
This commit is contained in:
Joeri Exelmans 2025-10-08 16:49:19 +02:00
parent 2b73da9387
commit 3f2db4457f
9 changed files with 412 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/App.tsx
View file

@ -1,11 +0,0 @@
import "./index.css";
import { VisualEditor } from "./VisualEditor/VisualEditor";
export function App() {
return (
<VisualEditor/>
);
}
export default App;

31
src/App/App.css Normal file
View file

@ -0,0 +1,31 @@
.layoutVertical {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
}
.panel {
height: 1.5rem;
background-color: lightgrey;
}
.layout {
display: flex;
width: 100%;
height: calc(100vh - 1.5rem);
}
.sidebar {
flex: 0 0 content;
padding-right: 4px;
}
.content {
flex: 1 1 auto;
overflow: auto;
}
details {
padding-left :10;
}
/* details:not(:has(details)) > summary::marker {
color: white;
} */

154
src/App/App.tsx Normal file
View file

@ -0,0 +1,154 @@
import { useState } from "react";
import { ConcreteState, emptyStatechart, Statechart, Transition } from "../VisualEditor/ast";
import { VisualEditor } from "../VisualEditor/VisualEditor";
import { RT_Statechart } from "../VisualEditor/runtime_types";
import { initialize, raiseEvent } from "../VisualEditor/interpreter";
import "../index.css";
import "./App.css";
import { Action, Expression } from "../VisualEditor/label_ast";
export function stateDescription(state: ConcreteState) {
const description = state.comments.length > 0 ? state.comments[0][1] : state.uid;
return description;
}
export function ShowTransition(props: {transition: Transition}) {
return <>&#10132; {stateDescription(props.transition.tgt)}</>;
}
export function ShowExpr(props: {expr: Expression}) {
if (props.expr.kind === "literal") {
return <>{props.expr.value}</>;
}
else if (props.expr.kind === "ref") {
return <>{props.expr.variable}</>;
}
else if (props.expr.kind === "unaryExpr") {
return <>{props.expr.operator}<ShowExpr expr={props.expr.expr}/></>;
}
else if (props.expr.kind === "binaryExpr") {
return <><ShowExpr expr={props.expr.lhs}/>{props.expr.operator}<ShowExpr expr={props.expr.rhs}/></>;
}
}
export function ShowAction(props: {action: Action}) {
if (props.action.kind === "raise") {
return <>raise {props.action.event}</>;
}
else if (props.action.kind === "assignment") {
return <>{props.action.lhs} = <ShowExpr expr={props.action.rhs}/>;</>;
}
}
export function AST(props: {root: ConcreteState, transitions: Map<string, Transition[]>}) {
const description = stateDescription(props.root);
const outgoing = props.transitions.get(props.root.uid) || [];
return <details open={true}>
<summary>{props.root.kind}: {description}</summary>
{props.root.entryActions.length>0 &&
<details open={true}>
<summary>entry actions</summary>
{props.root.entryActions.map(action =>
<div>&emsp;<ShowAction action={action}/></div>
)}
</details>
}
{props.root.exitActions.length>0 &&
<details open={true}>
<summary>exit actions</summary>
{props.root.exitActions.map(action =>
<ShowAction action={action}/>
)}
</details>
}
{props.root.children.length>0 &&
<details open={true}>
<summary>children</summary>
{props.root.children.map(child =>
<AST root={child} transitions={props.transitions} />
)}
</details>
}
{outgoing.length>0 &&
<details open={true}>
<summary>outgoing</summary>
{outgoing.map(transition => <>&emsp;<ShowTransition transition={transition}/><br/></>)}
</details>
}
</details>
}
export function App() {
const [ast, setAST] = useState<Statechart>(emptyStatechart);
const [errors, setErrors] = useState<[string,string][]>([]);
const [rt, setRT] = useState<RT_Statechart|null>(null);
const [paused, setPaused] = useState(true);
const [timescale, setTimescale] = useState(1);
function restart() {
const rt = initialize(ast);
console.log('runtime: ', rt);
setRT(rt);
}
function stop() {
setRT(null);
}
function raise(event: string) {
if (rt && ast.inputEvents.has(event)) {
const nextConfigs = raiseEvent(event, ast, ast.root, rt)
console.log({nextConfigs});
if (nextConfigs.length > 0) {
if (nextConfigs.length > 1) {
console.warn('non-determinism, blindly selecting first next run-time state!');
}
setRT(nextConfigs[0]);
}
}
}
return <div className="layoutVertical">
<div className="panel">
<button onClick={restart}>(re)start</button>
<select disabled={rt===null} value="raise event..." onChange={e => raise(e.target.value)}>
<option value="">raise event...</option>
{[...ast.inputEvents].map(event =>
<option value={event}>{event}</option>
)}
</select>
<button onClick={stop} >stop</button>
&emsp;
<input type="radio" name="paused" id="radio-paused" checked={paused} disabled={rt===null}/>
<label htmlFor="radio-paused">paused</label>
<input type="radio" name="realtime" id="radio-realtime" checked={!paused} disabled={rt===null}/>
<label htmlFor="radio-realtime">real-time</label>
&emsp;
<label htmlFor="number-timescale">timescale</label>
<input type="number" id="number-timescale" disabled={rt===null} value={timescale} style={{width:40}}/>
</div>
<div className="layout">
<main className="content">
<VisualEditor {...{ast, setAST, rt, setRT, errors, setErrors}}/>
</main>
<aside className="sidebar">
<AST {...ast}/>
<hr/>
{rt &&
[...rt.environment.entries()].map(([variable,value]) => <>
{variable}: {value}<br/>
</>)
}
</aside>
</div>
</div>;
}
export default App;

6
src/VisualEditor/VisualEditor.css
View file

@ -30,7 +30,7 @@ text.highlight {
}
.rountangle {
fill: rgba(255, 255, 255, 255);
fill: white;
/* fill: none; */
stroke: black;
stroke-width: 2px;
@ -58,6 +58,10 @@ text.highlight {
.rountangle.error {
stroke: rgb(230,0,0);
}
.rountangle.active {
fill: rgb(255, 196, 0);
fill-opacity: 0.6;
}
.selected:hover {
cursor: grab;

29
src/VisualEditor/VisualEditor.tsx
View file

@ -1,4 +1,4 @@
import { MouseEventHandler, SetStateAction, useEffect, useRef, useState } from "react";
import { Dispatch, MouseEventHandler, SetStateAction, useEffect, useRef, useState } from "react";
import { ArcDirection, Line2D, Rect2D, Vec2D, addV2D, arcDirection, area, euclideanDistance, getBottomSide, getLeftSide, getRightSide, getTopSide, isEntirelyWithin, normalizeRect, subtractV2D, transformLine, transformRect } from "./geometry";
import "./VisualEditor.css";
@ -9,7 +9,9 @@ import { parseStatechart } from "./parser";
import { CORNER_HELPER_OFFSET, CORNER_HELPER_RADIUS, MIN_ROUNTANGLE_SIZE, ROUNTANGLE_RADIUS } from "./parameters";
import * as lz4 from "@nick/lz4";
import { initialize } from "./interpreter";
import { getActiveStates, initialize } from "./interpreter";
import { RT_Statechart } from "./runtime_types";
import { emptyStatechart, Statechart } from "./ast";
type DraggingState = {
@ -48,7 +50,16 @@ export const sides: [RountanglePart, (r:Rect2D)=>Line2D][] = [
["bottom", getBottomSide],
];
export function VisualEditor() {
type VisualEditorProps = {
ast: Statechart,
setAST: Dispatch<SetStateAction<Statechart>>,
rt: RT_Statechart|null,
setRT: Dispatch<SetStateAction<RT_Statechart|null>>,
errors: [string,string][],
setErrors: Dispatch<SetStateAction<[string,string][]>>,
};
export function VisualEditor({ast, setAST, rt, setRT, errors, setErrors}: VisualEditorProps) {
const [historyState, setHistoryState] = useState<HistoryState>({current: emptyState, history: [], future: []});
const state = historyState.current;
@ -110,8 +121,6 @@ export function VisualEditor() {
// not null while the user is making a selection
const [selectingState, setSelectingState] = useState<SelectingState>(null);
const [errors, setErrors] = useState<[string,string][]>([]);
const refSVG = useRef<SVGSVGElement>(null);
useEffect(() => {
@ -139,9 +148,7 @@ export function VisualEditor() {
const [statechart, errors] = parseStatechart(state);
console.log('statechart: ', statechart, 'errors:', errors);
setErrors(errors);
const rt = initialize(statechart);
console.log('runtime:', rt);
setAST(statechart);
}, 100);
return () => clearTimeout(timeout);
}, [state]);
@ -489,6 +496,8 @@ export function VisualEditor() {
}
}
const active = getActiveStates(rt?.mode || {});
const rootErrors = errors.filter(([uid]) => uid === "root").map(err=>err[1]);
return <svg width="4000px" height="4000px"
@ -518,6 +527,7 @@ export function VisualEditor() {
selected={selection.find(r => r.uid === rountangle.uid)?.parts || []}
highlight={[...(sidesToHighlight[rountangle.uid] || []), ...(rountanglesToHighlight[rountangle.uid]?["left","right","top","bottom"]:[])]}
errors={errors.filter(([uid,msg])=>uid===rountangle.uid).map(err=>err[1])}
active={active.has(rountangle.uid)}
/>)}
{state.arrows.map(arrow => {
@ -631,7 +641,7 @@ function rountangleMinSize(size: Vec2D): Vec2D {
};
}
export function RountangleSVG(props: {rountangle: Rountangle, selected: string[], highlight: RountanglePart[], errors: string[]}) {
export function RountangleSVG(props: {rountangle: Rountangle, selected: string[], highlight: RountanglePart[], errors: string[], active: boolean}) {
const {topLeft, size, uid} = props.rountangle;
// always draw a rountangle with a minimum size
// during resizing, rountangle can be smaller than this size and even have a negative size, but we don't show it
@ -642,6 +652,7 @@ export function RountangleSVG(props: {rountangle: Rountangle, selected: string[]
+(props.selected.length===4?" selected":"")
+((props.rountangle.kind==="or")?" or":"")
+(props.errors.length>0?" error":"")
+(props.active?" active":"")
}
rx={ROUNTANGLE_RADIUS} ry={ROUNTANGLE_RADIUS}
x={0}

59
src/VisualEditor/ast.ts
View file

@ -2,10 +2,12 @@ import { Action, TransitionLabel } from "./label_ast";
export type AbstractState = {
uid: string;
parent?: ConcreteState;
children: ConcreteState[];
comments: [string, string][]; // array of tuple (text-uid, text-text)
entryActions: Action[];
exitActions: Action[];
depth: number;
}
export type AndState = {
@ -37,4 +39,61 @@ export type Statechart = {
inputEvents: Set<string>;
internalEvents: Set<string>;
outputEvents: Set<string>;
uid2State: Map<string, ConcreteState>;
}
export const emptyStatechart: Statechart = {
root: {
uid: "root",
kind: "or",
initial: [],
children:[],
comments: [],
entryActions: [],
exitActions: [],
},
transitions: new Map(),
variables: new Set(),
inputEvents: new Set(),
internalEvents: new Set(),
outputEvents: new Set(),
};
// reflexive, transitive relation
export function isAncestorOf({ancestor, descendant}: {ancestor: ConcreteState, descendant: ConcreteState}): ConcreteState[] | false {
if (ancestor.uid === descendant.uid) {
return [descendant];
}
if (ancestor.depth >= descendant.depth) {
return false;
}
const pathToParent = isAncestorOf({ancestor, descendant: descendant.parent!});
return pathToParent && [...pathToParent, descendant];
}
// the arena of a transition is the lowest common ancestor state that is an OR-state
// see "Deconstructing the Semantics of Big-Step Modelling Languages" by Shahram Esmaeilsabzali, 2009
export function computeArena({src, tgt}: {src: ConcreteState, tgt: ConcreteState}): {
arena: ConcreteState,
srcPath: ConcreteState[],
tgtPath: ConcreteState[],
} {
if (src.depth >= tgt.depth) {
const path = isAncestorOf({descendant: src, ancestor: tgt});
if (path) {
if (tgt.kind === "or") {
return {arena: tgt, srcPath: path, tgtPath: [tgt]};
}
}
// keep looking
const {arena, srcPath, tgtPath} = computeArena({src, tgt: tgt.parent!});
return {arena, srcPath, tgtPath: [...tgtPath, tgt]};
}
else {
// same, but swap src and tgt
const {arena, srcPath, tgtPath} = computeArena({src: tgt, tgt: src});
return {arena, srcPath: tgtPath, tgtPath: srcPath};
}
throw new Error("should never reach here");
}

165
src/VisualEditor/interpreter.ts
View file

@ -1,11 +1,11 @@
import { ConcreteState, Statechart } from "./ast";
import { computeArena, ConcreteState, isAncestorOf, Statechart, Transition } from "./ast";
import { Action, Expression } from "./label_ast";
import { Environment, RaisedEvents, Mode, RT_Statechart, initialRaised } from "./runtime_types";
export function initialize(ast: Statechart): RT_Statechart {
const {mode, environment, raised} = enter(ast.root, {
const {mode, environment, ...raised} = enterDefault(ast.root, {
environment: new Map(),
raised: initialRaised,
...initialRaised,
});
return {
mode,
@ -17,59 +17,102 @@ export function initialize(ast: Statechart): RT_Statechart {
type ActionScope = {
environment: Environment,
raised: RaisedEvents,
};
} & RaisedEvents;
type EnteredScope = { mode: Mode } & ActionScope;
export function enter(state: ConcreteState, rt: ActionScope): EnteredScope {
let {environment, raised} = rt;
export function enterDefault(state: ConcreteState, rt: ActionScope): EnteredScope {
let actionScope = rt;
// execute entry actions
for (const action of state.entryActions) {
({environment, raised} = execAction(action, {environment, raised}));
(actionScope = execAction(action, actionScope));
}
// enter children...
const mode: {[uid:string]: Mode} = {};
if (state.kind === "and") {
// enter every child
for (const child of state.children) {
let childMode;
({mode: childMode, environment, raised} = enter(child, {environment, raised}));
({mode: childMode, ...actionScope} = enterDefault(child, actionScope));
mode[child.uid] = childMode;
}
}
else if (state.kind === "or") {
const mode: {[uid:string]: Mode} = {};
// same as AND-state, but we only enter the initial state(s)
for (const [_, child] of state.initial) {
let childMode;
({mode: childMode, environment, raised} = enter(child, {environment, raised}));
({mode: childMode, ...actionScope} = enterDefault(child, actionScope));
mode[child.uid] = childMode;
}
}
return { mode, environment, raised };
return { mode, ...actionScope };
}
export function exit(state: ConcreteState, rt: EnteredScope): ActionScope {
let {mode, environment, raised} = rt;
export function enterPath(path: ConcreteState[], rt: ActionScope): EnteredScope {
let actionScope = rt;
const [state, ...rest] = path;
// execute entry actions
for (const action of state.entryActions) {
(actionScope = execAction(action, actionScope));
}
// enter children...
const mode: {[uid:string]: Mode} = {};
if (state.kind === "and") {
// enter every child
for (const child of state.children) {
let childMode;
if (rest.length > 0 && child.uid === rest[0].uid) {
({mode: childMode, ...actionScope} = enterPath(rest, actionScope));
}
else {
({mode: childMode, ...actionScope} = enterDefault(child, actionScope));
}
mode[child.uid] = childMode;
}
}
else if (state.kind === "or") {
if (rest.length > 0) {
let childMode;
({mode: childMode, ...actionScope} = enterPath(rest, actionScope));
mode[rest[0].uid] = childMode;
}
else {
// same as AND-state, but we only enter the initial state(s)
for (const [_, child] of state.initial) {
let childMode;
({mode: childMode, ...actionScope} = enterDefault(child, actionScope));
mode[child.uid] = childMode;
}
}
}
return { mode, ...actionScope };
}
export function exitCurrent(state: ConcreteState, rt: EnteredScope): ActionScope {
let {mode, ...actionScope} = rt;
// exit all active children...
for (const [childUid, childMode] of Object.entries(mode)) {
const child = state.children.find(child => child.uid === childUid);
if (child) {
({environment, raised} = exit(child, {mode: childMode, environment, raised}));
(actionScope = exitCurrent(child, {mode: childMode, ...actionScope}));
}
}
// execute exit actions
for (const action of state.exitActions) {
({environment, raised} = execAction(action, {environment, raised}));
(actionScope = execAction(action, actionScope));
}
return {environment, raised};
return actionScope;
}
export function execAction(action: Action, rt: ActionScope): ActionScope {
@ -87,19 +130,14 @@ export function execAction(action: Action, rt: ActionScope): ActionScope {
// append to internal events
return {
...rt,
raised: {
...rt.raised,
internalEvents: [...rt.raised.internalEvents, action.event]},
internalEvents: [...rt.internalEvents, action.event],
};
}
else {
// append to output events
return {
...rt,
raised: {
...rt.raised,
outputEvents: [...rt.raised.outputEvents, action.event],
},
outputEvents: [...rt.outputEvents, action.event],
}
}
}
@ -142,10 +180,81 @@ export function evalExpr(expr: Expression, environment: Environment): any {
return UNARY_OPERATOR_MAP.get(expr.operator)!(arg);
}
else if (expr.kind === "binaryExpr") {
const argA = evalExpr(expr.lhs, environment);
const argB = evalExpr(expr.rhs, environment);
return BINARY_OPERATOR_MAP.get(expr.operator)!(argA,argB);
const lhs = evalExpr(expr.lhs, environment);
const rhs = evalExpr(expr.rhs, environment);
return BINARY_OPERATOR_MAP.get(expr.operator)!(lhs,rhs);
}
throw new Error("should never reach here");
}
export function getActiveStates(mode: Mode): Set<string> {
return new Set([].concat(
...Object.entries(mode).map(([childUid, childMode]) =>
[childUid, ...getActiveStates(childMode)])
));
}
export function raiseEvent(event: string, statechart: Statechart, sourceState: ConcreteState, rt: RT_Statechart): RT_Statechart[] {
const activeStates = sourceState.children.filter(child => rt.mode.hasOwnProperty(child.uid))
for (const state of activeStates) {
const outgoing = statechart.transitions.get(state.uid) || [];
const enabled = outgoing.filter(transition => transition.label[0].trigger.kind === "event" && transition.label[0].trigger.event === event);
const enabledGuard = enabled.filter(transition =>
evalExpr(transition.label[0].guard, rt.environment)
);
if (enabledGuard.length > 0) {
const newRts = enabledGuard.map(t => fireTransition(t, statechart, rt));
return newRts;
}
else {
// no enabled outgoing transitions, try the children:
return raiseEvent(event, statechart, state, rt);
}
}
return [];
}
function setModeDeep(oldMode: Mode, pathToState: ConcreteState[], newMode: Mode): Mode {
if (pathToState.length === 0) {
return newMode;
}
const [next, ...rest] = pathToState;
return {
...oldMode,
[next.uid]: setModeDeep(oldMode[next.uid], rest, newMode),
}
}
function unsetModeDeep(oldMode: Mode, pathToState: ConcreteState[]): Mode {
if (pathToState.length === 0) {
return {};
}
if (pathToState.length === 1) {
const keyToDelete = pathToState[0].uid;
const newMode = {...oldMode}; // shallow copy
delete newMode[keyToDelete];
return newMode;
}
const [next, ...rest] = pathToState;
return {
...oldMode,
[next.uid]: unsetModeDeep(oldMode[next.uid], rest),
}
}
export function fireTransition(t: Transition, statechart: Statechart, rt: RT_Statechart): RT_Statechart {
const {arena, srcPath, tgtPath} = computeArena(t);
const pathToArena = isAncestorOf({ancestor: statechart.root, descendant: arena}) as ConcreteState[];
console.log('fire ', t.src.comments[0][1], '->', t.tgt.comments[0][1], {srcPath, tgtPath});
let {environment, ...raised} = exitCurrent(srcPath[1], rt);
const exitedMode = unsetModeDeep(rt.mode, [...pathToArena.slice(1), ...srcPath.slice(1)]);
for (const action of t.label[0].actions) {
({environment, ...raised} = execAction(action, {environment, ...raised}));
}
let deepMode;
({mode: deepMode, environment, ...raised} = enterPath(tgtPath.slice(1), {environment, ...raised}));
// console.log('entered path:', tgtPath.slice(1), {deepMode});
const enteredMode = setModeDeep(exitedMode, [...pathToArena.slice(1), ...tgtPath.slice(1)], deepMode);
// console.log('pathToArena:', pathToArena, 'newMode:', enteredMode);
return {mode: enteredMode, environment, inputEvents: rt.inputEvents, ...raised};
}

7
src/VisualEditor/parser.ts
View file

@ -18,6 +18,7 @@ export function parseStatechart(state: VisualEditorState): [Statechart, [string,
comments: [],
entryActions: [],
exitActions: [],
depth: 0,
}
const uid2State = new Map<string, ConcreteState>([["root", root]]);
@ -54,10 +55,12 @@ export function parseStatechart(state: VisualEditorState): [Statechart, [string,
const candidate = parentCandidates[i];
if (candidate.uid === "root" || isEntirelyWithin(rt, candidate)) {
// found our parent :)
const parentState = uid2State.get(candidate.uid);
parentState!.children.push(state);
const parentState = uid2State.get(candidate.uid)!;
parentState.children.push(state);
parentCandidates.push(rt);
parentLinks.set(rt.uid, candidate.uid);
state.parent = parentState;
state.depth = parentState.depth+1;
break;
}
}

2
src/frontend.tsx
View file

@ -7,7 +7,7 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
import { App } from "./App/App";
const elem = document.getElementById("root")!;
const app = (