From 3f6b2ba9500dec77ef00546f2713481d1edcd1fd Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Fri, 7 Nov 2025 14:09:04 +0100 Subject: [PATCH 01/30] fix interpreter bug --- src/statecharts/interpreter.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/statecharts/interpreter.ts b/src/statecharts/interpreter.ts index 2520187..f7db64c 100644 --- a/src/statecharts/interpreter.ts +++ b/src/statecharts/interpreter.ts @@ -326,6 +326,7 @@ function attemptSrcState(simtime: number, sourceState: AbstractState, event: RT_ // A fair step is a response to one (input|internal) event, where possibly multiple transitions are made as long as their arenas do not overlap. A reasonably accurate and more intuitive explanation is that every orthogonal region is allowed to fire at most one transition. export function fairStep(simtime: number, event: RT_Event, statechart: Statechart, activeParent: StableState, {arenasFired, environment, ...config}: RT_Statechart & RaisedEvents): RT_Statechart & RaisedEvents { + console.log('fair step', event, activeParent); environment = environment.enterScope(activeParent.uid); // console.log('fairStep', arenasFired); for (const state of activeParent.children) { @@ -346,6 +347,7 @@ export function fairStep(simtime: number, event: RT_Event, statechart: Statechar } export function handleInputEvent(simtime: number, event: RT_Event, statechart: Statechart, {mode, environment, history}: {mode: Mode, environment: Environment, history: RT_History}): BigStep { + console.log('handleInputEvent', event); let raised = initialRaised; ({mode, environment, ...raised} = fairStep(simtime, event, statechart, statechart.root, {mode, environment, history, arenasFired: [], ...raised})); @@ -354,11 +356,12 @@ export function handleInputEvent(simtime: number, event: RT_Event, statechart: S } export function handleInternalEvents(simtime: number, statechart: Statechart, {internalEvents, ...rest}: RT_Statechart & RaisedEvents) { + console.log('handleInternalEvents'); while (internalEvents.length > 0) { const [nextEvent, ...remainingEvents] = internalEvents; ({internalEvents, ...rest} = fairStep(simtime, {kind: "input", ...nextEvent}, // internal event becomes input event - statechart, statechart.root, { arenasFired: [], internalEvents: remainingEvents, ...rest})); + statechart, statechart.root, { ...rest, arenasFired: [], internalEvents: remainingEvents, })); } return rest; } From 5713c3a59f787e9f81ea23faf26366f56f1301fb Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Fri, 7 Nov 2025 14:30:37 +0100 Subject: [PATCH 02/30] edit assignment.html --- assignment.html | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/assignment.html b/assignment.html index b8252bb..3e807cd 100644 --- a/assignment.html +++ b/assignment.html @@ -93,7 +93,10 @@
Note: StateBuddy will be updated from time to time, to fix bugs or add new features. To make sure you have the latest version, in StateBuddy, use the shortcut Ctrl+Shift+R to refresh the page while clearing your browser cache. +

StateBuddy was tested in Firefox 144.0 and Chromium 141.0.7390.107. +

+Problems? Please use the GitHub issue tracker.

Exercises

@@ -103,15 +106,15 @@ If you can solve the exercises, you will have a good (enough) understanding of t

The exercises can be opened by clicking on their respective links:

    -
  1. +
  2. nested timed transitions
    3. -
  3. +
  4. parent-first
    5. -
  5. +
  6. order of orthogonal regions
    7. -
  7. +
  8. crossing orthogonal regions
    9. -
  9. +
  10. internal events (yes, there's a bug here that i should fix)
@@ -137,7 +140,7 @@ If you can solve the exercises, you will have a good (enough) understanding of t +
  • Non-determinism (e.g., multiple enabled outgoing transitions of the same state) results in a run-time error!

    • Example: - Consider the linked Statechart. + Consider the linked Statechart. After initialization, the current states are: OrthogonalState, A, C, E. Then, the Statechart remains idle until it receives an input event. Suppose at time T=5s, the input event e is received. This triggers the execution of an RTC step. The RTC step starts with a fair-step, where regions r1, r2 and r3 (in that order) are allowed to fire at most one transition each. @@ -199,7 +203,7 @@ If you can solve the exercises, you will have a good (enough) understanding of t

    Interfaces

    You will implement the plant (= digital watch) controller as a Statechart. The controller only talks to the plant via input-events and output-events. In StateBuddy, you can also interactively raise input events directly into the controller statechart (Debugger UI). Finally, the plant also has its own UI, which sends input events to the plant.

    -

    For the curious student: Yes, the (simulated) plant is also implemented as a (rather big) Statechart.

    +

    For the curious student: Yes, the (simulated) plant is also implemented as a (rather big) Statechart.

    Overview of our simulated system-under-study.
    @@ -313,7 +317,7 @@ The controller can send the following events to the plant:

    Starting point

    -

    Use this link to the starting point for this assignment.

    +

    Use this link to the starting point for this assignment.

    Testing your solution

    To test your solution, initialize the execution, and interact with the plant UI. The execution can run in (scaled) real-time, with the ability to pause/resume.

    @@ -359,8 +363,8 @@ meaning: "as long as the top-right button is pressed, the light should be on, an

    Additional resources

    From 2d6b8a764b1c13055b3aa36ff53f4d90d0ca28c1 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Fri, 7 Nov 2025 14:32:43 +0100 Subject: [PATCH 03/30] update assignment.html (the bug mentioned has been fixed) --- assignment.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assignment.html b/assignment.html index 3e807cd..5c829af 100644 --- a/assignment.html +++ b/assignment.html @@ -115,7 +115,7 @@ If you can solve the exercises, you will have a good (enough) understanding of t
  • crossing orthogonal regions
  • - internal events (yes, there's a bug here that i should fix)
    • + internal events From fcf9448441d8609300405d0da47a5d8406f7be0f Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Fri, 7 Nov 2025 14:35:53 +0100 Subject: [PATCH 04/30] assignment: fix example --- assignment.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assignment.html b/assignment.html index 5c829af..337eefc 100644 --- a/assignment.html +++ b/assignment.html @@ -112,7 +112,7 @@ If you can solve the exercises, you will have a good (enough) understanding of t parent-first
  • order of orthogonal regions
    • -
  • +
  • crossing orthogonal regions
  • internal events
    • From 2dd35ab079121c4a10a26bfb63b3d754877934c3 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Fri, 7 Nov 2025 15:09:21 +0100 Subject: [PATCH 05/30] assignment: fix property (it was wrong) + always include traces for 'true' and 'false' --- assignment.html | 4 ++-- src/App/check_property.ts | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/assignment.html b/assignment.html index 337eefc..827ce77 100644 --- a/assignment.html +++ b/assignment.html @@ -317,12 +317,12 @@ The controller can send the following events to the plant:

    Starting point

    -

    Use this link to the starting point for this assignment.

    +

    Use this link to the starting point for this assignment.

    Testing your solution

    To test your solution, initialize the execution, and interact with the plant UI. The execution can run in (scaled) real-time, with the ability to pause/resume.

    To gain more confidence that you correctly implemented the requirements, you can write Metric Temporal Logic (MTL) properties. An example of such a property is: - 

    G (topRightPressed -> (lightOn U (~topRightPressed & F[0,2] lightOn)))
    + 
    G ((topRightPressed & (X ~topRightPressed)) -> (G[0,2000] (lightOn)))
    meaning: "as long as the top-right button is pressed, the light should be on, and after the top-right button is released, the light should remain on for 2 seconds" AKA Requirement 1.

    diff --git a/src/App/check_property.ts b/src/App/check_property.ts index ff6e25a..85e1cce 100644 --- a/src/App/check_property.ts +++ b/src/App/check_property.ts @@ -36,7 +36,10 @@ export async function checkProperty(plant: Plant, property: return [entry]; }, [] as {simtime: number, state: any}[]); - let traces = {} as {[key: string]: [number, any][]}; + let traces = { + 'true': [0, true] as [number, any], + 'false': [0, false] as [number, any], + } as {[key: string]: [number, any][]}; for (const {simtime, state} of cleanPlantStates) { for (const [key, value] of Object.entries(state)) { // just append From 9922f8588daebd04e28d2e1132533d3879ccf248 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Sat, 8 Nov 2025 10:32:28 +0100 Subject: [PATCH 06/30] clean up code a bit (split of SideBar component and simulator callbacks from App) + fix bug in property checker --- src/App/App.tsx | 601 +++----------------------- src/App/SideBar.tsx | 331 ++++++++++++++ src/App/TopPanel/TopPanel.tsx | 3 +- src/App/VisualEditor/VisualEditor.tsx | 14 +- src/App/check_property.ts | 6 +- src/App/makePartialSetter.ts | 36 ++ src/App/plants.ts | 14 + src/App/useSimulator.ts | 226 +++++++++- src/App/useUrlHashState.ts | 191 +------- src/statecharts/interpreter.ts | 3 - 10 files changed, 707 insertions(+), 718 deletions(-) create mode 100644 src/App/SideBar.tsx create mode 100644 src/App/makePartialSetter.ts create mode 100644 src/App/plants.ts diff --git a/src/App/App.tsx b/src/App/App.tsx index b18d96a..88450c4 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -1,36 +1,20 @@ import "../index.css"; import "./App.css"; -import { Dispatch, ReactElement, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from "react"; -import AddIcon from '@mui/icons-material/Add'; -import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'; -import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined'; -import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; -import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined'; -import VisibilityIcon from '@mui/icons-material/Visibility'; - -import { Statechart } from "@/statecharts/abstract_syntax"; import { detectConnections } from "@/statecharts/detect_connections"; -import { Conns, coupledExecution, statechartExecution } from "@/statecharts/timed_reactive"; -import { RuntimeError } from "../statecharts/interpreter"; import { parseStatechart } from "../statecharts/parser"; -import { BigStep, RaisedEvent } from "../statecharts/runtime_types"; -import { getSimTime, getWallClkDelay, TimeMode } from "../statecharts/time"; import { BottomPanel } from "./BottomPanel"; -import { PersistentDetails, PersistentDetailsLocalStorage } from "./PersistentDetails"; -import { digitalWatchPlant } from "./Plant/DigitalWatch/DigitalWatch"; -import { dummyPlant } from "./Plant/Dummy/Dummy"; -import { microwavePlant } from "./Plant/Microwave/Microwave"; -import { Plant } from "./Plant/Plant"; -import { trafficLightPlant } from "./Plant/TrafficLight/TrafficLight"; -import { RTHistory } from "./RTHistory"; -import { ShowAST, ShowInputEvents, ShowInternalEvents, ShowOutputEvents } from "./ShowAST"; +import { defaultSideBarState, SideBar, SideBarState } from "./SideBar"; +import { InsertMode } from "./TopPanel/InsertModes"; import { TopPanel } from "./TopPanel/TopPanel"; import { VisualEditor, VisualEditorState } from "./VisualEditor/VisualEditor"; -import { checkProperty, PropertyCheckResult } from "./check_property"; +import { makeIndividualSetters } from "./makePartialSetter"; import { useEditor } from "./useEditor"; +import { useSimulator } from "./useSimulator"; import { useUrlHashState } from "./useUrlHashState"; +import { plants } from "./plants"; export type EditHistory = { current: VisualEditorState, @@ -38,53 +22,22 @@ export type EditHistory = { future: VisualEditorState[], } -type UniversalPlantState = {[property: string]: boolean|number}; +export type AppState = { + showKeys: boolean, + zoom: number, + insertMode: InsertMode, +} & SideBarState; -const plants: [string, Plant][] = [ - ["dummy", dummyPlant], - ["microwave", microwavePlant as unknown as Plant], - ["digital watch", digitalWatchPlant as unknown as Plant], - ["traffic light", trafficLightPlant as unknown as Plant], -] +const defaultAppState: AppState = { + showKeys: true, + zoom: 1, + insertMode: 'and', -export type TraceItemError = { - cause: BigStepCause, // event name, or - simtime: number, - error: RuntimeError, + ...defaultSideBarState, } -type CoupledState = { - sc: BigStep, - plant: BigStep, - // plantCleanState: {[prop: string]: boolean|number}, -}; - -export type BigStepCause = { - kind: "init", - simtime: 0, -} | { - kind: "input", - simtime: number, - eventName: string, - param?: any, -} | { - kind: "timer", - simtime: number, -}; - -export type TraceItem = - { kind: "error" } & TraceItemError -| { kind: "bigstep", simtime: number, cause: BigStepCause, state: CoupledState, outputEvents: RaisedEvent[] }; - -export type TraceState = { - trace: [TraceItem, ...TraceItem[]], // non-empty - idx: number, -}; - export function App() { const [editHistory, setEditHistory] = useState(null); - const [trace, setTrace] = useState(null); - const [time, setTime] = useState({kind: "paused", simtime: 0}); const [modal, setModal] = useState(null); const {makeCheckPoint, onRedo, onUndo, onRotate} = useEditor(setEditHistory); @@ -94,54 +47,51 @@ export function App() { setEditHistory(historyState => historyState && ({...historyState, current: cb(historyState.current)})); }, [setEditHistory]); - const { - autoConnect, - setAutoConnect, - autoScroll, - setAutoScroll, - plantConns, - setPlantConns, - showKeys, - setShowKeys, - zoom, - setZoom, - insertMode, - setInsertMode, - plantName, - setPlantName, - showConnections, - setShowConnections, - showProperties, - setShowProperties, - showExecutionTrace, - setShowExecutionTrace, - showPlantTrace, - setShowPlantTrace, - properties, - setProperties, - savedTraces, - setSavedTraces, - activeProperty, - setActiveProperty, - } = useUrlHashState(editorState, setEditHistory); - const plant = plants.find(([pn, p]) => pn === plantName)![1]; - - const refRightSideBar = useRef(null); - // parse concrete syntax always: const conns = useMemo(() => editorState && detectConnections(editorState), [editorState]); const parsed = useMemo(() => editorState && conns && parseStatechart(editorState, conns), [editorState, conns]); const ast = parsed && parsed[0]; - const syntaxErrors = parsed && parsed[1] || []; - const currentTraceItem = trace && trace.trace[trace.idx]; - const allErrors = [ - ...syntaxErrors, - ...(currentTraceItem && currentTraceItem.kind === "error") ? [{ - message: currentTraceItem.error.message, - shapeUid: currentTraceItem.error.highlight[0], - }] : [], - ]; + const [appState, setAppState] = useState(defaultAppState); + + const persist = useUrlHashState( + recoveredState => { + // we support two formats + // @ts-ignore + if (recoveredState.nextID) { + // old format + setEditHistory(() => ({current: recoveredState as VisualEditorState, history: [], future: []})); + } + else { + // new format + // @ts-ignore + if (recoveredState.editorState !== undefined) { + const {editorState, ...appState} = recoveredState as AppState & {editorState: VisualEditorState}; + setEditHistory(() => ({current: editorState, history: [], future: []})); + setAppState(() => appState); + } + } + }, + ); + + useEffect(() => { + const timeout = setTimeout(() => { + if (editorState !== null) { + persist({editorState, ...appState}); + } + }, 100); + return () => clearTimeout(timeout); + }, [editorState, appState]); + + const { + autoScroll, + plantConns, + plantName, + } = appState; + + const plant = plants.find(([pn, p]) => pn === plantName)![1]; + + const refRightSideBar = useRef(null); const scrollDownSidebar = useCallback(() => { if (autoScroll && refRightSideBar.current) { const el = refRightSideBar.current; @@ -152,221 +102,25 @@ export function App() { } }, [refRightSideBar.current, autoScroll]); - // coupled execution - const cE = useMemo(() => ast && coupledExecution({ - sc: statechartExecution(ast), - plant: plant.execution, - }, { - ...plantConns, - ...Object.fromEntries(ast.inputEvents.map(({event}) => ["debug."+event, ['sc',event] as [string,string]])), - }), [ast]); - - const onInit = useCallback(() => { - if (cE === null) return; - const metadata = {simtime: 0, cause: {kind: "init" as const, simtime: 0 as const}}; - try { - const [outputEvents, state] = cE.initial(); // may throw if initialing the statechart results in a RuntimeError - setTrace({ - trace: [{kind: "bigstep", ...metadata, state, outputEvents}], - idx: 0, - }); - } - catch (error) { - if (error instanceof RuntimeError) { - setTrace({ - trace: [{kind: "error", ...metadata, error}], - idx: 0, - }); - } - else { - throw error; // probably a bug in the interpreter - } - } - setTime(time => { - if (time.kind === "paused") { - return {...time, simtime: 0}; - } - else { - return {...time, since: {simtime: 0, wallclktime: performance.now()}}; - } - }); - scrollDownSidebar(); - }, [cE, scrollDownSidebar]); - - const onClear = useCallback(() => { - setTrace(null); - setTime({kind: "paused", simtime: 0}); - }, [setTrace, setTime]); - - // raise input event, producing a new runtime configuration (or a runtime error) - const onRaise = (inputEvent: string, param: any) => { - if (cE === null) return; - if (currentTraceItem !== null /*&& ast.inputEvents.some(e => e.event === inputEvent)*/) { - if (currentTraceItem.kind === "bigstep") { - const simtime = getSimTime(time, Math.round(performance.now())); - appendNewConfig(simtime, {kind: "input", simtime, eventName: inputEvent, param}, () => { - return cE.extTransition(simtime, currentTraceItem.state, {kind: "input", name: inputEvent, param}); - }); - } - } - }; - - // timer elapse events are triggered by a change of the simulated time (possibly as a scheduled JS event loop timeout) - useEffect(() => { - let timeout: NodeJS.Timeout | undefined; - if (currentTraceItem !== null && cE !== null) { - if (currentTraceItem.kind === "bigstep") { - const nextTimeout = cE?.timeAdvance(currentTraceItem.state); - - const raiseTimeEvent = () => { - appendNewConfig(nextTimeout, {kind: "timer", simtime: nextTimeout}, () => { - return cE.intTransition(currentTraceItem.state); - }); - } - - if (time.kind === "realtime") { - const wallclkDelay = getWallClkDelay(time, nextTimeout, Math.round(performance.now())); - if (wallclkDelay !== Infinity) { - timeout = setTimeout(raiseTimeEvent, wallclkDelay); - } - } - else if (time.kind === "paused") { - if (nextTimeout <= time.simtime) { - raiseTimeEvent(); - } - } - } - } - return () => { - if (timeout) clearTimeout(timeout); - } - }, [time, currentTraceItem]); // <-- todo: is this really efficient? - - function appendNewConfig(simtime: number, cause: BigStepCause, computeNewState: () => [RaisedEvent[], CoupledState]) { - let newItem: TraceItem; - const metadata = {simtime, cause} - try { - const [outputEvents, state] = computeNewState(); // may throw RuntimeError - newItem = {kind: "bigstep", ...metadata, state, outputEvents}; - } - catch (error) { - if (error instanceof RuntimeError) { - newItem = {kind: "error", ...metadata, error}; - // also pause the simulation, for dramatic effect: - setTime({kind: "paused", simtime}); - } - else { - throw error; - } - } - // @ts-ignore - setTrace(trace => ({ - trace: [ - ...trace!.trace.slice(0, trace!.idx+1), // remove everything after current item - newItem, - ], - // idx: 0, - idx: trace!.idx+1, - })); - scrollDownSidebar(); - } - - const onBack = useCallback(() => { - if (trace !== null) { - setTime(() => { - if (trace !== null) { - return { - kind: "paused", - simtime: trace.trace[trace.idx-1].simtime, - } - } - return { kind: "paused", simtime: 0 }; - }); - setTrace({ - ...trace, - idx: trace.idx-1, - }); - } - }, [trace]); + const simulator = useSimulator(ast, plant, plantConns, scrollDownSidebar); + + const setters = makeIndividualSetters(setAppState, Object.keys(appState) as (keyof AppState)[]); + const syntaxErrors = parsed && parsed[1] || []; + const currentTraceItem = simulator.trace && simulator.trace.trace[simulator.trace.idx]; const currentBigStep = currentTraceItem && currentTraceItem.kind === "bigstep" && currentTraceItem; + const allErrors = [ + ...syntaxErrors, + ...(currentTraceItem && currentTraceItem.kind === "error") ? [{ + message: currentTraceItem.error.message, + shapeUid: currentTraceItem.error.highlight[0], + }] : [], + ]; const highlightActive = (currentBigStep && currentBigStep.state.sc.mode) || new Set(); const highlightTransitions = currentBigStep && currentBigStep.state.sc.firedTransitions || []; - - const speed = time.kind === "paused" ? 0 : time.scale; - const plantState = currentBigStep && currentBigStep.state.plant || plant.execution.initial()[1]; - useEffect(() => { - ast && autoConnect && autoDetectConns(ast, plant, setPlantConns); - }, [ast, plant, autoConnect]); - - const [propertyResults, setPropertyResults] = useState(null); - - - const onSaveTrace = () => { - if (trace) { - setSavedTraces(savedTraces => [ - ...savedTraces, - ["untitled", trace.trace.map((item) => item.cause)] as [string, BigStepCause[]], - ]); - } - } - - const onReplayTrace = (causes: BigStepCause[]) => { - if (cE) { - function run_until(simtime: number) { - while (true) { - const nextTimeout = cE!.timeAdvance(lastState); - if (nextTimeout > simtime) { - break; - } - const [outputEvents, coupledState] = cE!.intTransition(lastState); - lastState = coupledState; - lastSimtime = nextTimeout; - newTrace.push({kind: "bigstep", simtime: nextTimeout, state: coupledState, outputEvents, cause: {kind: "timer", simtime: nextTimeout}}); - } - } - const [outputEvents, coupledState] = cE.initial(); - const newTrace = [{kind: "bigstep", simtime: 0, state: coupledState, outputEvents, cause: {kind: "init"} as BigStepCause} as TraceItem] as [TraceItem, ...TraceItem[]]; - let lastState = coupledState; - let lastSimtime = 0; - for (const cause of causes) { - if (cause.kind === "input") { - run_until(cause.simtime); // <-- just make sure we haven't missed any timers elapsing - // @ts-ignore - const [outputEvents, coupledState] = cE.extTransition(cause.simtime, newTrace.at(-1)!.state, {kind: "input", name: cause.eventName, param: cause.param}); - lastState = coupledState; - lastSimtime = cause.simtime; - newTrace.push({kind: "bigstep", simtime: cause.simtime, state: coupledState, outputEvents, cause}); - } - else if (cause.kind === "timer") { - run_until(cause.simtime); - } - } - setTrace({trace: newTrace, idx: newTrace.length-1}); - setTime({kind: "paused", simtime: lastSimtime}); - } - } - - // if some properties change, re-evaluate them: - useEffect(() => { - let timeout: NodeJS.Timeout; - if (trace) { - setPropertyResults(null); - timeout = setTimeout(() => { - Promise.all(properties.map((property, i) => { - return checkProperty(plant, property, trace.trace); - })) - .then(results => { - setPropertyResults(results); - }) - }) - } - return () => clearTimeout(timeout); - }, [properties, trace, plant]); - return <> {/* Modal dialog */} @@ -394,13 +148,13 @@ export function App() { style={{flex: '0 0 content'}} > {editHistory && } {/* Editor */}
    {editorState && conns && syntaxErrors && - } + }
    @@ -413,142 +167,7 @@ export function App() { maxWidth: 'min(400px, 50vw)', }}>
    -
    - {/* State tree */} - - state tree -
      - {ast && } -
    -     - {/* Input events */} - - input events - {ast && onRaise("debug."+e,p)} - disabled={trace===null || trace.trace[trace.idx].kind === "error"} - showKeys={showKeys}/>} - - {/* Internal events */} - - internal events - {ast && } - - {/* Output events */} - - output events - {ast && } - - {/* Plant */} - - plant - -
    - {/* Render plant */} - { onRaise("plant.ui."+e.name, e.param)} - />} -     - {/* Connections */} - - connections - - {ast && ConnEditor(ast, plant, plantConns, setPlantConns)} - - {/* Properties */} -
    setShowProperties(e.newState === "open")}> - properties - {plant &&
    - available signals: -   - {plant.signals.join(', ')} -
    } - {properties.map((property, i) => { - const result = propertyResults && propertyResults[i]; - let violated = null, propertyError = null; - if (result) { - violated = result[0] && result[0].length > 0 && !result[0][0].satisfied; - propertyError = result[1]; - } - return
    -
    - - setProperties(properties => properties.toSpliced(i, 1, e.target.value))}/> - - {propertyError &&
    {propertyError}
    } -
    ; - })} -
    - -
    -
    - {/* Traces */} -
    setShowExecutionTrace(e.newState === "open")}>execution trace -
    - {savedTraces.map((savedTrace, i) => -
    - -   - {(Math.floor(savedTrace[1].at(-1)!.simtime/1000))}s - ({savedTrace[1].length}) -   - setSavedTraces(savedTraces => savedTraces.toSpliced(i, 1, [e.target.value, savedTraces[i][1]]))}/> - -
    - )} -
    -
    - setShowPlantTrace(e.target.checked)}/> - - setAutoScroll(e.target.checked)}/> - -   - -
    -
    -
    - - {/* We cheat a bit, and render the execution trace depending on whether the
    above is 'open' or not, rather than putting it as a child of the
    . We do this because only then can we get the execution trace to scroll without the rest scrolling as well. */} - {showExecutionTrace && -
    -
    - {ast && } -
    -
    } -
    -
    +
    @@ -561,83 +180,5 @@ export function App() { ; } -function autoDetectConns(ast: Statechart, plant: Plant, setPlantConns: Dispatch>) { - for (const {event: a} of plant.uiEvents) { - for (const {event: b} of plant.inputEvents) { - if (a === b) { - setPlantConns(conns => ({...conns, ['plant.ui.'+a]: ['plant', b]})); - break; - } - } - for (const {event: b} of ast.inputEvents) { - if (a === b) { - setPlantConns(conns => ({...conns, ['plant.ui.'+a]: ['sc', b]})); - } - } - } - for (const a of ast.outputEvents) { - for (const {event: b} of plant.inputEvents) { - if (a === b) { - setPlantConns(conns => ({...conns, ['sc.'+a]: ['plant', b]})); - } - } - } - for (const {event: a} of plant.outputEvents) { - for (const {event: b} of ast.inputEvents) { - if (a === b) { - setPlantConns(conns => ({...conns, ['plant.'+a]: ['sc', b]})); - } - } - } -} - - -function ConnEditor(ast: Statechart, plant: Plant, plantConns: Conns, setPlantConns: Dispatch>) { - const plantInputs = <>{plant.inputEvents.map(e => )} - const scInputs = <>{ast.inputEvents.map(e => )}; - return <> - - {/* SC output events can go to Plant */} - {[...ast.outputEvents].map(e =>
    - - -
    )} - - {/* Plant output events can go to Statechart */} - {[...plant.outputEvents.map(e =>
    - - -
    )]} - - {/* Plant UI events typically go to the Plant */} - {plant.uiEvents.map(e =>
    - - -
    )} - ; -} - export default App; diff --git a/src/App/SideBar.tsx b/src/App/SideBar.tsx new file mode 100644 index 0000000..0fc79df --- /dev/null +++ b/src/App/SideBar.tsx @@ -0,0 +1,331 @@ +import AddIcon from '@mui/icons-material/Add'; +import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'; +import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined'; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; +import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined'; +import VisibilityIcon from '@mui/icons-material/Visibility'; +import { Conns } from '@/statecharts/timed_reactive'; +import { Dispatch, Ref, SetStateAction, useEffect, useRef, useState } from 'react'; +import { Statechart } from '@/statecharts/abstract_syntax'; +import { ShowAST, ShowInputEvents, ShowInternalEvents, ShowOutputEvents } from './ShowAST'; +import { Plant } from './Plant/Plant'; +import { checkProperty, PropertyCheckResult } from './check_property'; +import { Setters } from './makePartialSetter'; +import { RTHistory } from './RTHistory'; +import { BigStepCause, TraceState } from './useSimulator'; +import { plants, UniversalPlantState } from './plants'; +import { TimeMode } from '@/statecharts/time'; +import { PersistentDetails } from './PersistentDetails'; + +type SavedTraces = [string, BigStepCause[]][]; + +export type SideBarState = { + showStateTree: boolean, + showInputEvents: boolean, + showInternalEvents: boolean, + showOutputEvents: boolean, + showPlant: boolean, + showConnections: boolean, + showProperties: boolean, + showExecutionTrace: boolean, + + plantName: string, + plantConns: Conns, + autoConnect: boolean, + + properties: string[], + activeProperty: number, + savedTraces: SavedTraces, + autoScroll: boolean, + showPlantTrace: boolean, +}; + +export const defaultSideBarState = { + showStateTree: false, + showInputEvents: true, + showInternalEvents: true, + showOutputEvents: true, + showPlant: false, + showConnections: false, + showProperties: false, + showExecutionTrace: true, + + plantName: 'dummy', + plantConns: {}, + autoConnect: true, + + properties: [], + activeProperty: 0, + savedTraces: [], + autoScroll: false, + showPlantTrace: false, +}; + +type SideBarProps = SideBarState & { + refRightSideBar: Ref, + ast: Statechart | null, + plant: Plant, + // setSavedTraces: Dispatch>, + trace: TraceState|null, + setTrace: Dispatch>, + plantState: UniversalPlantState, + onRaise: (inputEvent: string, param: any) => void, + onReplayTrace: (causes: BigStepCause[]) => void, + setTime: Dispatch>, + time: TimeMode, +} & Setters; + +export function SideBar({showExecutionTrace, showConnections, plantName, showPlantTrace, showProperties, activeProperty, autoConnect, autoScroll, plantConns, properties, savedTraces, refRightSideBar, ast, plant, setSavedTraces, trace, setTrace, setProperties, setShowPlantTrace, setActiveProperty, setPlantConns, setPlantName, setAutoConnect, setShowProperties, setAutoScroll, time, plantState, onReplayTrace, onRaise, setTime, setShowConnections, setShowExecutionTrace, showPlant, setShowPlant, showOutputEvents, setShowOutputEvents, setShowInternalEvents, showInternalEvents, setShowInputEvents, setShowStateTree, showInputEvents, showStateTree}: SideBarProps) { + + const [propertyResults, setPropertyResults] = useState(null); + + const speed = time.kind === "paused" ? 0 : time.scale; + + const onSaveTrace = () => { + if (trace) { + setSavedTraces(savedTraces => [ + ...savedTraces, + ["untitled", trace.trace.map((item) => item.cause)] as [string, BigStepCause[]], + ]); + } + } + + // if some properties change, re-evaluate them: + useEffect(() => { + let timeout: NodeJS.Timeout; + if (trace) { + setPropertyResults(null); + timeout = setTimeout(() => { + Promise.all(properties.map((property, i) => { + return checkProperty(plant, property, trace.trace); + })) + .then(results => { + setPropertyResults(results); + }) + }) + } + return () => clearTimeout(timeout); + }, [properties, trace, plant]); + + // whenever the ast, the plant or 'autoconnect' option changes, detect connections: + useEffect(() => { + if (ast && autoConnect) { + autoDetectConns(ast, plant, setPlantConns); + } + }, [ast, plant, autoConnect]); + + return <> +
    + {/* State tree */} + + state tree +
      + {ast && } +
    +     + {/* Input events */} + + input events + {ast && onRaise("debug."+e,p)} + disabled={trace===null || trace.trace[trace.idx].kind === "error"} + showKeys={true}/>} + + {/* Internal events */} + + internal events + {ast && } + + {/* Output events */} + + output events + {ast && } + + {/* Plant */} + + plant + +
    + {/* Render plant */} + { onRaise("plant.ui."+e.name, e.param)} + />} +     + {/* Connections */} + + connections + + {ast && ConnEditor(ast, plant, plantConns, setPlantConns)} + + {/* Properties */} +
    setShowProperties(e.newState === "open")}> + properties + {plant &&
    + available signals: +   + {plant.signals.join(', ')} +
    } + {properties.map((property, i) => { + const result = propertyResults && propertyResults[i]; + let violated = null, propertyError = null; + if (result) { + violated = result[0] && result[0].length > 0 && !result[0][0].satisfied; + propertyError = result[1]; + } + return
    +
    + + setProperties(properties => properties.toSpliced(i, 1, e.target.value))}/> + + {propertyError &&
    {propertyError}
    } +
    ; + })} +
    + +
    +
    + {/* Traces */} +
    setShowExecutionTrace(e.newState === "open")}>execution trace +
    + {savedTraces.map((savedTrace, i) => +
    + +   + {(Math.floor(savedTrace[1].at(-1)!.simtime/1000))}s + ({savedTrace[1].length}) +   + setSavedTraces(savedTraces => savedTraces.toSpliced(i, 1, [e.target.value, savedTraces[i][1]]))}/> + +
    + )} +
    +
    + setShowPlantTrace(e.target.checked)}/> + + setAutoScroll(e.target.checked)}/> + +   + +
    +
    +
    + + {/* We cheat a bit, and render the execution trace depending on whether the
    above is 'open' or not, rather than putting it as a child of the
    . We do this because only then can we get the execution trace to scroll without the rest scrolling as well. */} + {showExecutionTrace && +
    +
    + {ast && } +
    +
    } + ; +} + +function autoDetectConns(ast: Statechart, plant: Plant, setPlantConns: Dispatch>) { + for (const {event: a} of plant.uiEvents) { + for (const {event: b} of plant.inputEvents) { + if (a === b) { + setPlantConns(conns => ({...conns, ['plant.ui.'+a]: ['plant', b]})); + break; + } + } + for (const {event: b} of ast.inputEvents) { + if (a === b) { + setPlantConns(conns => ({...conns, ['plant.ui.'+a]: ['sc', b]})); + } + } + } + for (const a of ast.outputEvents) { + for (const {event: b} of plant.inputEvents) { + if (a === b) { + setPlantConns(conns => ({...conns, ['sc.'+a]: ['plant', b]})); + } + } + } + for (const {event: a} of plant.outputEvents) { + for (const {event: b} of ast.inputEvents) { + if (a === b) { + setPlantConns(conns => ({...conns, ['plant.'+a]: ['sc', b]})); + } + } + } +} + +function ConnEditor(ast: Statechart, plant: Plant, plantConns: Conns, setPlantConns: Dispatch>) { + const plantInputs = <>{plant.inputEvents.map(e => )} + const scInputs = <>{ast.inputEvents.map(e => )}; + return <> + + {/* SC output events can go to Plant */} + {[...ast.outputEvents].map(e =>
    + + +
    )} + + {/* Plant output events can go to Statechart */} + {[...plant.outputEvents.map(e =>
    + + +
    )]} + + {/* Plant UI events typically go to the Plant */} + {plant.uiEvents.map(e =>
    + + +
    )} + ; +} + diff --git a/src/App/TopPanel/TopPanel.tsx b/src/App/TopPanel/TopPanel.tsx index 73260c9..ed59b0a 100644 --- a/src/App/TopPanel/TopPanel.tsx +++ b/src/App/TopPanel/TopPanel.tsx @@ -3,7 +3,7 @@ import { TimerElapseEvent, Timers } from "../../statecharts/runtime_types"; import { getSimTime, setPaused, setRealtime, TimeMode } from "../../statecharts/time"; import { InsertMode } from "./InsertModes"; import { About } from "../Modals/About"; -import { EditHistory, TraceState } from "../App"; +import { EditHistory } from "../App"; import { KeyInfoHidden, KeyInfoVisible } from "./KeyInfo"; import { UndoRedoButtons } from "./UndoRedoButtons"; import { ZoomButtons } from "./ZoomButtons"; @@ -21,6 +21,7 @@ import { InsertModes } from "./InsertModes"; import { usePersistentState } from "@/App/persistent_state"; import { RotateButtons } from "./RotateButtons"; import { SpeedControl } from "./SpeedControl"; +import { TraceState } from "../useSimulator"; export type TopPanelProps = { trace: TraceState | null, diff --git a/src/App/VisualEditor/VisualEditor.tsx b/src/App/VisualEditor/VisualEditor.tsx index 4505dc6..9741520 100644 --- a/src/App/VisualEditor/VisualEditor.tsx +++ b/src/App/VisualEditor/VisualEditor.tsx @@ -1,6 +1,5 @@ import { Dispatch, memo, ReactElement, SetStateAction, useCallback, useEffect, useRef, useState } from "react"; -import { TraceState } from "@/App/App"; import { InsertMode } from "../TopPanel/InsertModes"; import { Mode } from "@/statecharts/runtime_types"; import { arraysEqual, objectsEqual, setsEqual } from "@/util/util"; @@ -17,7 +16,6 @@ import { useCopyPaste } from "./useCopyPaste"; import "./VisualEditor.css"; import { useMouse } from "./useMouse"; -import { Selecting } from "./Selection"; export type ConcreteSyntax = { rountangles: Rountangle[]; @@ -59,7 +57,8 @@ type VisualEditorProps = { setState: Dispatch<(v:VisualEditorState) => VisualEditorState>, conns: Connections, syntaxErrors: TraceableError[], - trace: TraceState | null, + // trace: TraceState | null, + // activeStates: Set, insertMode: InsertMode, highlightActive: Set, highlightTransitions: string[], @@ -68,7 +67,7 @@ type VisualEditorProps = { zoom: number; }; -export const VisualEditor = memo(function VisualEditor({state, setState, trace, conns, syntaxErrors: errors, insertMode, highlightActive, highlightTransitions, setModal, makeCheckPoint, zoom}: VisualEditorProps) { +export const VisualEditor = memo(function VisualEditor({state, setState, conns, syntaxErrors: errors, insertMode, highlightActive, highlightTransitions, setModal, makeCheckPoint, zoom}: VisualEditorProps) { // uid's of selected rountangles const selection = state.selection || []; @@ -87,7 +86,7 @@ export const VisualEditor = memo(function VisualEditor({state, setState, trace, }) }); }) - }, [trace && trace.idx]); + }, [highlightTransitions]); const {onCopy, onPaste, onCut, deleteSelection} = useCopyPaste(makeCheckPoint, state, setState, selection); @@ -167,15 +166,12 @@ export const VisualEditor = memo(function VisualEditor({state, setState, trace, } }, [setState]); - // @ts-ignore - const active = trace && trace.trace[trace.idx].mode || new Set(); - const rootErrors = errors.filter(({shapeUid}) => shapeUid === "root").map(({message}) => message); const size = 4000*zoom; return e.preventDefault()} ref={refSVG} diff --git a/src/App/check_property.ts b/src/App/check_property.ts index 85e1cce..110112b 100644 --- a/src/App/check_property.ts +++ b/src/App/check_property.ts @@ -1,6 +1,6 @@ import { RT_Statechart } from "@/statecharts/runtime_types"; -import { TraceItem } from "./App"; import { Plant } from "./Plant/Plant"; +import { TraceItem } from "./useSimulator"; // const endpoint = "http://localhost:15478/check_property"; const endpoint = "https://deemz.org/apis/mtl-aas/check_property"; @@ -37,8 +37,8 @@ export async function checkProperty(plant: Plant, property: }, [] as {simtime: number, state: any}[]); let traces = { - 'true': [0, true] as [number, any], - 'false': [0, false] as [number, any], + 'true': [[0, true] as [number, any]], + 'false': [[0, false] as [number, any]], } as {[key: string]: [number, any][]}; for (const {simtime, state} of cleanPlantStates) { for (const [key, value] of Object.entries(state)) { diff --git a/src/App/makePartialSetter.ts b/src/App/makePartialSetter.ts new file mode 100644 index 0000000..a9ef4a7 --- /dev/null +++ b/src/App/makePartialSetter.ts @@ -0,0 +1,36 @@ +import { Dispatch, SetStateAction, useCallback, useMemo } from "react"; + +export function makePartialSetter(fullSetter: Dispatch>, key: K): Dispatch> { + return (newValueOrCallback: T[K] | ((newValue: T[K]) => T[K])) => { + fullSetter(oldFullValue => { + if (typeof newValueOrCallback === 'function') { + return { + ...oldFullValue, + [key]: (newValueOrCallback as (newValue: T[K]) => T[K])(oldFullValue[key] as T[K]), + } + } + return { + ...oldFullValue, + [key]: newValueOrCallback as T[K], + } + }) + }; +} + +export type Setters = { + [K in keyof T as `set${Capitalize>}`]: Dispatch>; +} + +export function makeIndividualSetters( + fullSetter: Dispatch>, + keys: (keyof T)[], +): Setters { + // @ts-ignore + return useMemo(() => + // @ts-ignore + Object.fromEntries(keys.map((key: string) => { + return [`set${key.charAt(0).toUpperCase()}${key.slice(1)}`, makePartialSetter(fullSetter, key)]; + })), + [fullSetter] + ); +} diff --git a/src/App/plants.ts b/src/App/plants.ts new file mode 100644 index 0000000..84157a9 --- /dev/null +++ b/src/App/plants.ts @@ -0,0 +1,14 @@ +import { digitalWatchPlant } from "./Plant/DigitalWatch/DigitalWatch"; +import { dummyPlant } from "./Plant/Dummy/Dummy"; +import { microwavePlant } from "./Plant/Microwave/Microwave"; +import { Plant } from "./Plant/Plant"; +import { trafficLightPlant } from "./Plant/TrafficLight/TrafficLight"; + +export type UniversalPlantState = {[property: string]: boolean|number}; + +export const plants: [string, Plant][] = [ + ["dummy", dummyPlant], + ["microwave", microwavePlant as unknown as Plant], + ["digital watch", digitalWatchPlant as unknown as Plant], + ["traffic light", trafficLightPlant as unknown as Plant], +]; diff --git a/src/App/useSimulator.ts b/src/App/useSimulator.ts index 1f75028..9844455 100644 --- a/src/App/useSimulator.ts +++ b/src/App/useSimulator.ts @@ -1,3 +1,223 @@ -export function useSimulator() { - -} \ No newline at end of file +import { Statechart } from "@/statecharts/abstract_syntax"; +import { RuntimeError } from "@/statecharts/interpreter"; +import { BigStep, RaisedEvent } from "@/statecharts/runtime_types"; +import { Conns, coupledExecution, statechartExecution } from "@/statecharts/timed_reactive"; +import { useCallback, useEffect, useMemo, useState } from "react"; +import { Plant } from "./Plant/Plant"; +import { getSimTime, getWallClkDelay, TimeMode } from "@/statecharts/time"; +import { UniversalPlantState } from "./plants"; + +type CoupledState = { + sc: BigStep, + plant: BigStep, +}; + +export type TraceItemError = { + cause: BigStepCause, // event name, or + simtime: number, + error: RuntimeError, +} + +export type BigStepCause = { + kind: "init", + simtime: 0, +} | { + kind: "input", + simtime: number, + eventName: string, + param?: any, +} | { + kind: "timer", + simtime: number, +}; + +export type TraceItem = + { kind: "error" } & TraceItemError +| { kind: "bigstep", simtime: number, cause: BigStepCause, state: CoupledState, outputEvents: RaisedEvent[] }; + +export type TraceState = { + trace: [TraceItem, ...TraceItem[]], // non-empty + idx: number, +}; + + +export function useSimulator(ast: Statechart|null, plant: Plant, plantConns: Conns, onStep: () => void) { + const [time, setTime] = useState({kind: "paused", simtime: 0}); + const [trace, setTrace] = useState(null); + const currentTraceItem = trace && trace.trace[trace.idx]; + + // coupled execution + const cE = useMemo(() => ast && coupledExecution({ + sc: statechartExecution(ast), + plant: plant.execution, + }, { + ...plantConns, + ...Object.fromEntries(ast.inputEvents.map(({event}) => ["debug."+event, ['sc',event] as [string,string]])), + }), [ast]); + + const onInit = useCallback(() => { + if (cE === null) return; + const metadata = {simtime: 0, cause: {kind: "init" as const, simtime: 0 as const}}; + try { + const [outputEvents, state] = cE.initial(); // may throw if initialing the statechart results in a RuntimeError + setTrace({ + trace: [{kind: "bigstep", ...metadata, state, outputEvents}], + idx: 0, + }); + } + catch (error) { + if (error instanceof RuntimeError) { + setTrace({ + trace: [{kind: "error", ...metadata, error}], + idx: 0, + }); + } + else { + throw error; // probably a bug in the interpreter + } + } + setTime(time => { + if (time.kind === "paused") { + return {...time, simtime: 0}; + } + else { + return {...time, since: {simtime: 0, wallclktime: performance.now()}}; + } + }); + onStep(); + }, [cE, onStep]); + + const onClear = useCallback(() => { + setTrace(null); + setTime({kind: "paused", simtime: 0}); + }, [setTrace, setTime]); + + // raise input event, producing a new runtime configuration (or a runtime error) + const onRaise = (inputEvent: string, param: any) => { + if (cE === null) return; + if (currentTraceItem !== null /*&& ast.inputEvents.some(e => e.event === inputEvent)*/) { + if (currentTraceItem.kind === "bigstep") { + const simtime = getSimTime(time, Math.round(performance.now())); + appendNewConfig(simtime, {kind: "input", simtime, eventName: inputEvent, param}, () => { + return cE.extTransition(simtime, currentTraceItem.state, {kind: "input", name: inputEvent, param}); + }); + } + } + }; + + // timer elapse events are triggered by a change of the simulated time (possibly as a scheduled JS event loop timeout) + useEffect(() => { + let timeout: NodeJS.Timeout | undefined; + if (currentTraceItem !== null && cE !== null) { + if (currentTraceItem.kind === "bigstep") { + const nextTimeout = cE?.timeAdvance(currentTraceItem.state); + + const raiseTimeEvent = () => { + appendNewConfig(nextTimeout, {kind: "timer", simtime: nextTimeout}, () => { + return cE.intTransition(currentTraceItem.state); + }); + } + + if (time.kind === "realtime") { + const wallclkDelay = getWallClkDelay(time, nextTimeout, Math.round(performance.now())); + if (wallclkDelay !== Infinity) { + timeout = setTimeout(raiseTimeEvent, wallclkDelay); + } + } + else if (time.kind === "paused") { + if (nextTimeout <= time.simtime) { + raiseTimeEvent(); + } + } + } + } + return () => { + if (timeout) clearTimeout(timeout); + } + }, [time, currentTraceItem]); // <-- todo: is this really efficient? + + function appendNewConfig(simtime: number, cause: BigStepCause, computeNewState: () => [RaisedEvent[], CoupledState]) { + let newItem: TraceItem; + const metadata = {simtime, cause} + try { + const [outputEvents, state] = computeNewState(); // may throw RuntimeError + newItem = {kind: "bigstep", ...metadata, state, outputEvents}; + } + catch (error) { + if (error instanceof RuntimeError) { + newItem = {kind: "error", ...metadata, error}; + // also pause the simulation, for dramatic effect: + setTime({kind: "paused", simtime}); + } + else { + throw error; + } + } + // @ts-ignore + setTrace(trace => ({ + trace: [ + ...trace!.trace.slice(0, trace!.idx+1), // remove everything after current item + newItem, + ], + // idx: 0, + idx: trace!.idx+1, + })); + onStep(); + } + + const onBack = useCallback(() => { + if (trace !== null) { + setTime(() => { + if (trace !== null) { + return { + kind: "paused", + simtime: trace.trace[trace.idx-1].simtime, + } + } + return { kind: "paused", simtime: 0 }; + }); + setTrace({ + ...trace, + idx: trace.idx-1, + }); + } + }, [trace]); + + const onReplayTrace = (causes: BigStepCause[]) => { + if (cE) { + function run_until(simtime: number) { + while (true) { + const nextTimeout = cE!.timeAdvance(lastState); + if (nextTimeout > simtime) { + break; + } + const [outputEvents, coupledState] = cE!.intTransition(lastState); + lastState = coupledState; + lastSimtime = nextTimeout; + newTrace.push({kind: "bigstep", simtime: nextTimeout, state: coupledState, outputEvents, cause: {kind: "timer", simtime: nextTimeout}}); + } + } + const [outputEvents, coupledState] = cE.initial(); + const newTrace = [{kind: "bigstep", simtime: 0, state: coupledState, outputEvents, cause: {kind: "init"} as BigStepCause} as TraceItem] as [TraceItem, ...TraceItem[]]; + let lastState = coupledState; + let lastSimtime = 0; + for (const cause of causes) { + if (cause.kind === "input") { + run_until(cause.simtime); // <-- just make sure we haven't missed any timers elapsing + // @ts-ignore + const [outputEvents, coupledState] = cE.extTransition(cause.simtime, newTrace.at(-1)!.state, {kind: "input", name: cause.eventName, param: cause.param}); + lastState = coupledState; + lastSimtime = cause.simtime; + newTrace.push({kind: "bigstep", simtime: cause.simtime, state: coupledState, outputEvents, cause}); + } + else if (cause.kind === "timer") { + run_until(cause.simtime); + } + } + setTrace({trace: newTrace, idx: newTrace.length-1}); + setTime({kind: "paused", simtime: lastSimtime}); + } + } + + return {trace, setTrace, plant, onInit, onClear, onBack, onRaise, onReplayTrace, time, setTime}; +} diff --git a/src/App/useUrlHashState.ts b/src/App/useUrlHashState.ts index 3c9dd16..3859d54 100644 --- a/src/App/useUrlHashState.ts +++ b/src/App/useUrlHashState.ts @@ -1,29 +1,7 @@ -import { Dispatch, SetStateAction, useEffect, useState } from "react"; -import { BigStepCause, EditHistory } from "./App"; -import { VisualEditorState } from "./VisualEditor/VisualEditor"; -import { emptyState } from "@/statecharts/concrete_syntax"; -import { InsertMode } from "./TopPanel/InsertModes"; -import { Conns } from "@/statecharts/timed_reactive"; - -export function useUrlHashState(editorState: VisualEditorState | null, setEditHistory: Dispatch>) { - - // i should probably put all these things into a single object, the 'app state'... - const [autoScroll, setAutoScroll] = useState(false); - const [autoConnect, setAutoConnect] = useState(true); - const [plantConns, setPlantConns] = useState({}); - const [showKeys, setShowKeys] = useState(true); - const [zoom, setZoom] = useState(1); - const [insertMode, setInsertMode] = useState("and"); - const [plantName, setPlantName] = useState("dummy"); - - const [showConnections, setShowConnections] = useState(false); - const [showProperties, setShowProperties] = useState(false); - const [showExecutionTrace, setShowExecutionTrace] = useState(true); - const [showPlantTrace, setShowPlantTrace] = useState(false); - const [properties, setProperties] = useState([]); - const [savedTraces, setSavedTraces] = useState<[string, BigStepCause[]][]>([]); - const [activeProperty, setActiveProperty] = useState(0); +import { useEffect } from "react"; +// persist state in URL hash +export function useUrlHashState(recoverCallback: (recoveredState: T) => void): (toPersist: T) => void { // recover editor state from URL - we need an effect here because decompression is asynchronous useEffect(() => { @@ -32,7 +10,7 @@ export function useUrlHashState(editorState: VisualEditorState | null, setEditHi if (compressedState.length === 0) { // empty URL hash console.log("no state to recover"); - setEditHistory(() => ({current: emptyState, history: [], future: []})); + // setEditHistory(() => ({current: emptyState, history: [], future: []})); return; } let compressedBuffer; @@ -41,7 +19,7 @@ export function useUrlHashState(editorState: VisualEditorState | null, setEditHi } catch (e) { // probably invalid base64 console.error("failed to recover state:", e); - setEditHistory(() => ({current: emptyState, history: [], future: []})); + // setEditHistory(() => ({current: emptyState, history: [], future: []})); return; } const ds = new DecompressionStream("deflate"); @@ -51,153 +29,28 @@ export function useUrlHashState(editorState: VisualEditorState | null, setEditHi new Response(ds.readable).arrayBuffer() .then(decompressedBuffer => { const recoveredState = JSON.parse(new TextDecoder().decode(decompressedBuffer)); - // we support two formats - if (recoveredState.nextID) { - // old format - setEditHistory(() => ({current: recoveredState, history: [], future: []})); - } - else { - console.log(recoveredState); - // new format - if (recoveredState.editorState !== undefined) { - setEditHistory(() => ({current: recoveredState.editorState, history: [], future: []})); - } - if (recoveredState.plantName !== undefined) { - setPlantName(recoveredState.plantName); - } - if (recoveredState.autoScroll !== undefined) { - setAutoScroll(recoveredState.autoScroll); - } - if (recoveredState.autoConnect !== undefined) { - setAutoConnect(recoveredState.autoConnect); - } - if (recoveredState.plantConns !== undefined) { - setPlantConns(recoveredState.plantConns); - } - - if (recoveredState.showKeys !== undefined) { - setShowKeys(recoveredState.showKeys); - } - if (recoveredState.zoom !== undefined) { - setZoom(recoveredState.zoom); - } - if (recoveredState.insertMode !== undefined) { - setInsertMode(recoveredState.insertMode); - } - if (recoveredState.showConnections !== undefined) { - setShowConnections(recoveredState.showConnections); - } - if (recoveredState.showProperties !== undefined) { - setShowProperties(recoveredState.showProperties); - } - if (recoveredState.showExecutionTrace !== undefined) { - setShowExecutionTrace(recoveredState.showExecutionTrace); - } - if (recoveredState.showPlantTrace !== undefined) { - setShowPlantTrace(recoveredState.showPlantTrace); - } - if (recoveredState.properties !== undefined) { - setProperties(recoveredState.properties); - } - if (recoveredState.savedTraces !== undefined) { - setSavedTraces(recoveredState.savedTraces); - } - if (recoveredState.activeProperty !== undefined) { - setActiveProperty(recoveredState.activeProperty); - } - - } + recoverCallback(recoveredState); }) .catch(e => { // any other error: invalid JSON, or decompression failed. console.error("failed to recover state:", e); - setEditHistory({current: emptyState, history: [], future: []}); + // setEditHistory({current: emptyState, history: [], future: []}); }); }, []); - // save editor state in URL - useEffect(() => { - const timeout = setTimeout(() => { - if (editorState === null) { - window.location.hash = "#"; - return; - } - const serializedState = JSON.stringify({ - autoConnect, - autoScroll, - plantConns, - showKeys, - zoom, - insertMode, - plantName, - editorState, - showConnections, - showProperties, - showExecutionTrace, - showPlantTrace, - properties, - savedTraces, - activeProperty, - }); - const stateBuffer = new TextEncoder().encode(serializedState); - const cs = new CompressionStream("deflate"); - const writer = cs.writable.getWriter(); - writer.write(stateBuffer); - writer.close(); - // todo: cancel this promise handler when concurrently starting another compression job - new Response(cs.readable).arrayBuffer().then(compressedStateBuffer => { - const compressedStateString = new Uint8Array(compressedStateBuffer).toBase64(); - window.location.hash = "#"+compressedStateString; - }); - }, 100); - return () => clearTimeout(timeout); - }, [ - editorState, - - autoConnect, - autoScroll, - plantConns, - showKeys, - zoom, - insertMode, - plantName, - showConnections, - showProperties, - showExecutionTrace, - showPlantTrace, - properties, - savedTraces, - activeProperty, - ]); - - return { - autoConnect, - setAutoConnect, - autoScroll, - setAutoScroll, - plantConns, - setPlantConns, - showKeys, - setShowKeys, - zoom, - setZoom, - insertMode, - setInsertMode, - plantName, - setPlantName, - showConnections, - setShowConnections, - showProperties, - setShowProperties, - showExecutionTrace, - setShowExecutionTrace, - showPlantTrace, - setShowPlantTrace, - properties, - setProperties, - savedTraces, - setSavedTraces, - activeProperty, - setActiveProperty, + function persist(state: T) { + const serializedState = JSON.stringify(state); + const stateBuffer = new TextEncoder().encode(serializedState); + const cs = new CompressionStream("deflate"); + const writer = cs.writable.getWriter(); + writer.write(stateBuffer); + writer.close(); + // todo: cancel this promise handler when concurrently starting another compression job + new Response(cs.readable).arrayBuffer().then(compressedStateBuffer => { + const compressedStateString = new Uint8Array(compressedStateBuffer).toBase64(); + window.location.hash = "#"+compressedStateString; + }); } -} \ No newline at end of file + + return persist; +} diff --git a/src/statecharts/interpreter.ts b/src/statecharts/interpreter.ts index f7db64c..deabf61 100644 --- a/src/statecharts/interpreter.ts +++ b/src/statecharts/interpreter.ts @@ -326,7 +326,6 @@ function attemptSrcState(simtime: number, sourceState: AbstractState, event: RT_ // A fair step is a response to one (input|internal) event, where possibly multiple transitions are made as long as their arenas do not overlap. A reasonably accurate and more intuitive explanation is that every orthogonal region is allowed to fire at most one transition. export function fairStep(simtime: number, event: RT_Event, statechart: Statechart, activeParent: StableState, {arenasFired, environment, ...config}: RT_Statechart & RaisedEvents): RT_Statechart & RaisedEvents { - console.log('fair step', event, activeParent); environment = environment.enterScope(activeParent.uid); // console.log('fairStep', arenasFired); for (const state of activeParent.children) { @@ -347,7 +346,6 @@ export function fairStep(simtime: number, event: RT_Event, statechart: Statechar } export function handleInputEvent(simtime: number, event: RT_Event, statechart: Statechart, {mode, environment, history}: {mode: Mode, environment: Environment, history: RT_History}): BigStep { - console.log('handleInputEvent', event); let raised = initialRaised; ({mode, environment, ...raised} = fairStep(simtime, event, statechart, statechart.root, {mode, environment, history, arenasFired: [], ...raised})); @@ -356,7 +354,6 @@ export function handleInputEvent(simtime: number, event: RT_Event, statechart: S } export function handleInternalEvents(simtime: number, statechart: Statechart, {internalEvents, ...rest}: RT_Statechart & RaisedEvents) { - console.log('handleInternalEvents'); while (internalEvents.length > 0) { const [nextEvent, ...remainingEvents] = internalEvents; ({internalEvents, ...rest} = fairStep(simtime, From e0863c9443143ee90a60039b4bfd7398b9cb012c Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Sat, 8 Nov 2025 10:36:42 +0100 Subject: [PATCH 07/30] merge recovered app state with default app state (makes a difference if the recovered app state is only partially defined) --- src/App/App.tsx | 2 +- src/App/SideBar.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index 88450c4..ea8e514 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -68,7 +68,7 @@ export function App() { if (recoveredState.editorState !== undefined) { const {editorState, ...appState} = recoveredState as AppState & {editorState: VisualEditorState}; setEditHistory(() => ({current: editorState, history: [], future: []})); - setAppState(() => appState); + setAppState(defaultAppState => Object.assign({}, defaultAppState, appState)); } } }, diff --git a/src/App/SideBar.tsx b/src/App/SideBar.tsx index 0fc79df..ee2714b 100644 --- a/src/App/SideBar.tsx +++ b/src/App/SideBar.tsx @@ -45,7 +45,7 @@ export const defaultSideBarState = { showInputEvents: true, showInternalEvents: true, showOutputEvents: true, - showPlant: false, + showPlant: true, showConnections: false, showProperties: false, showExecutionTrace: true, From a013fca768f0a079e7f07d2f7c8a09aa743f06ac Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Sat, 8 Nov 2025 10:41:41 +0100 Subject: [PATCH 08/30] update assignment (MTL property was wrong! i blame chatgpt) --- assignment.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assignment.html b/assignment.html index 827ce77..13a80a2 100644 --- a/assignment.html +++ b/assignment.html @@ -317,12 +317,12 @@ The controller can send the following events to the plant:

    Starting point

    -

    Use this link to the starting point for this assignment.

    +

    Use this link to the starting point for this assignment.

    Testing your solution

    To test your solution, initialize the execution, and interact with the plant UI. The execution can run in (scaled) real-time, with the ability to pause/resume.

    To gain more confidence that you correctly implemented the requirements, you can write Metric Temporal Logic (MTL) properties. An example of such a property is: - 

    G ((topRightPressed & (X ~topRightPressed)) -> (G[0,2000] (lightOn)))
    + 
    G ((topRightPressed -> lightOn) & ((topRightPressed & (X ~topRightPressed)) -> (G[0,2000] (lightOn))))
    meaning: "as long as the top-right button is pressed, the light should be on, and after the top-right button is released, the light should remain on for 2 seconds" AKA Requirement 1.

    From 5674416623786e24f0d07263e0472577428cc403 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Sat, 8 Nov 2025 10:49:51 +0100 Subject: [PATCH 09/30] assignment: get rid of the water levels --- assignment.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assignment.html b/assignment.html index 13a80a2..1b41ba9 100644 --- a/assignment.html +++ b/assignment.html @@ -344,7 +344,7 @@ meaning: "as long as the top-right button is pressed, the light should be on, an

    What is expected

    -

    Your solution needs to be precisely correct: superficially correct behavior when running the generated code with the GUI (e.g., seeing the water levels change) is not enough: the timing-related requirements are exact.

    +

    Your solution needs to be precisely correct: superficially correct behavior when interacting with the Plant UI is not enough: the timing-related requirements are exact.

    The assignment has been designed specifically to encourage use of as many Statechart features as possible:

    • composite states
      • From 07b51dd2f2a1a5017128ea941c579defb4ef8687 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Sat, 8 Nov 2025 10:50:41 +0100 Subject: [PATCH 10/30] move file --- assignment.html => teaching/mosis25/assignment.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename assignment.html => teaching/mosis25/assignment.html (100%) diff --git a/assignment.html b/teaching/mosis25/assignment.html similarity index 100% rename from assignment.html rename to teaching/mosis25/assignment.html From 1f72542234056a17af81bce0a51a64bb32ea8f49 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Wed, 12 Nov 2025 14:34:46 +0100 Subject: [PATCH 11/30] cleanup code a bit more --- src/App/App.tsx | 116 +++++++++--------- src/App/{ => BottomPanel}/BottomPanel.css | 0 src/App/{ => BottomPanel}/BottomPanel.tsx | 6 +- src/App/Modals/ModalOverlay.tsx | 17 +++ src/App/PersistentDetails.tsx | 2 +- src/App/Plant/DigitalWatch/DigitalWatch.tsx | 2 +- src/App/Plant/Microwave/Microwave.tsx | 2 +- src/App/Plant/Plant.ts | 1 - src/App/Plant/TrafficLight/TrafficLight.tsx | 2 +- src/App/{ => SideBar}/RTHistory.tsx | 10 +- src/App/{ => SideBar}/ShowAST.tsx | 14 +-- src/App/{AST.css => SideBar/SideBar.css} | 0 src/App/{ => SideBar}/SideBar.tsx | 11 +- src/App/{ => SideBar}/check_property.ts | 4 +- src/App/TopPanel/TopPanel.tsx | 4 +- src/App/VisualEditor/VisualEditor.tsx | 9 +- .../VisualEditor/{ => hooks}/useCopyPaste.ts | 2 +- src/App/VisualEditor/{ => hooks}/useMouse.tsx | 8 +- src/App/{ => hooks}/useEditor.ts | 5 +- src/App/{ => hooks}/useSimulator.ts | 5 +- src/App/makePartialSetter.ts | 24 ++-- src/{App => hooks}/useAudioContext.ts | 0 src/hooks/useDetectChange.ts | 8 ++ .../usePersistentState.ts} | 0 src/{App => hooks}/useUrlHashState.ts | 16 +-- 25 files changed, 146 insertions(+), 122 deletions(-) rename src/App/{ => BottomPanel}/BottomPanel.css (100%) rename src/App/{ => BottomPanel}/BottomPanel.tsx (84%) create mode 100644 src/App/Modals/ModalOverlay.tsx rename src/App/{ => SideBar}/RTHistory.tsx (94%) rename src/App/{ => SideBar}/ShowAST.tsx (92%) rename src/App/{AST.css => SideBar/SideBar.css} (100%) rename src/App/{ => SideBar}/SideBar.tsx (98%) rename src/App/{ => SideBar}/check_property.ts (96%) rename src/App/VisualEditor/{ => hooks}/useCopyPaste.ts (98%) rename src/App/VisualEditor/{ => hooks}/useMouse.tsx (98%) rename src/App/{ => hooks}/useEditor.ts (97%) rename src/App/{ => hooks}/useSimulator.ts (98%) rename src/{App => hooks}/useAudioContext.ts (100%) create mode 100644 src/hooks/useDetectChange.ts rename src/{App/persistent_state.ts => hooks/usePersistentState.ts} (100%) rename src/{App => hooks}/useUrlHashState.ts (83%) diff --git a/src/App/App.tsx b/src/App/App.tsx index ea8e514..9b77e2e 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -5,16 +5,18 @@ import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from import { detectConnections } from "@/statecharts/detect_connections"; import { parseStatechart } from "../statecharts/parser"; -import { BottomPanel } from "./BottomPanel"; -import { defaultSideBarState, SideBar, SideBarState } from "./SideBar"; +import { BottomPanel } from "./BottomPanel/BottomPanel"; +import { defaultSideBarState, SideBar, SideBarState } from "./SideBar/SideBar"; import { InsertMode } from "./TopPanel/InsertModes"; import { TopPanel } from "./TopPanel/TopPanel"; import { VisualEditor, VisualEditorState } from "./VisualEditor/VisualEditor"; -import { makeIndividualSetters } from "./makePartialSetter"; -import { useEditor } from "./useEditor"; -import { useSimulator } from "./useSimulator"; -import { useUrlHashState } from "./useUrlHashState"; +import { makeAllSetters } from "./makePartialSetter"; +import { useEditor } from "./hooks/useEditor"; +import { useSimulator } from "./hooks/useSimulator"; +import { useUrlHashState } from "../hooks/useUrlHashState"; import { plants } from "./plants"; +import { emptyState } from "@/statecharts/concrete_syntax"; +import { ModalOverlay } from "./Modals/ModalOverlay"; export type EditHistory = { current: VisualEditorState, @@ -56,9 +58,12 @@ export function App() { const persist = useUrlHashState( recoveredState => { + if (recoveredState === null) { + setEditHistory(() => ({current: emptyState, history: [], future: []})); + } // we support two formats // @ts-ignore - if (recoveredState.nextID) { + else if (recoveredState.nextID) { // old format setEditHistory(() => ({current: recoveredState as VisualEditorState, history: [], future: []})); } @@ -77,6 +82,7 @@ export function App() { useEffect(() => { const timeout = setTimeout(() => { if (editorState !== null) { + console.log('persisting state to url'); persist({editorState, ...appState}); } }, 100); @@ -104,7 +110,15 @@ export function App() { const simulator = useSimulator(ast, plant, plantConns, scrollDownSidebar); - const setters = makeIndividualSetters(setAppState, Object.keys(appState) as (keyof AppState)[]); + // console.log('render app', {ast, plant, appState}); + // useDetectChange(ast, 'ast'); + // useDetectChange(plant, 'plant'); + // useDetectChange(scrollDownSidebar, 'scrollDownSidebar'); + // useDetectChange(appState, 'appState'); + // useDetectChange(simulator.time, 'simulator.time'); + // useDetectChange(simulator.trace, 'simulator.trace'); + + const setters = makeAllSetters(setAppState, Object.keys(appState) as (keyof AppState)[]); const syntaxErrors = parsed && parsed[1] || []; const currentTraceItem = simulator.trace && simulator.trace.trace[simulator.trace.idx]; @@ -121,63 +135,51 @@ export function App() { const plantState = currentBigStep && currentBigStep.state.plant || plant.execution.initial()[1]; - return <> + return + {/* top-to-bottom: everything -> bottom panel */} +
      - {/* Modal dialog */} - {modal &&
      setModal(null)}> -
      - e.stopPropagation()}> - {modal} - -
      -
      } + {/* left-to-right: main -> sidebar */} +
      - {/* top-to-bottom: everything -> bottom panel */} -
      - - {/* left-to-right: main -> sidebar */} -
      - - {/* top-to-bottom: top bar, editor */} -
      - {/* Top bar */} -
      - {editHistory && } + {/* top-to-bottom: top bar, editor */} +
      + {/* Top bar */} +
      + {editHistory && } +
      + {/* Editor */} +
      + {editorState && conns && syntaxErrors && + } +
      - {/* Editor */} -
      - {editorState && conns && syntaxErrors && - } + + {/* Right: sidebar */} +
      +
      + +
      - {/* Right: sidebar */} -
      -
      - -
      + {/* Bottom panel */} +
      + {syntaxErrors && }
      - - {/* Bottom panel */} -
      - {syntaxErrors && } -
      -
      - ; + ; } export default App; diff --git a/src/App/BottomPanel.css b/src/App/BottomPanel/BottomPanel.css similarity index 100% rename from src/App/BottomPanel.css rename to src/App/BottomPanel/BottomPanel.css diff --git a/src/App/BottomPanel.tsx b/src/App/BottomPanel/BottomPanel.tsx similarity index 84% rename from src/App/BottomPanel.tsx rename to src/App/BottomPanel/BottomPanel.tsx index 2f84992..c0d02ae 100644 --- a/src/App/BottomPanel.tsx +++ b/src/App/BottomPanel/BottomPanel.tsx @@ -1,10 +1,10 @@ import { useEffect, useState } from "react"; -import { TraceableError } from "../statecharts/parser"; +import { TraceableError } from "../../statecharts/parser"; import "./BottomPanel.css"; -import logo from "../../artwork/logo-playful.svg"; -import { PersistentDetailsLocalStorage } from "./PersistentDetails"; +import logo from "../../../artwork/logo-playful.svg"; +import { PersistentDetailsLocalStorage } from "../PersistentDetails"; export function BottomPanel(props: {errors: TraceableError[]}) { const [greeting, setGreeting] = useState( diff --git a/src/App/Modals/ModalOverlay.tsx b/src/App/Modals/ModalOverlay.tsx new file mode 100644 index 0000000..965879d --- /dev/null +++ b/src/App/Modals/ModalOverlay.tsx @@ -0,0 +1,17 @@ +import { Dispatch, PropsWithChildren, ReactElement, SetStateAction } from "react"; + +export function ModalOverlay(props: PropsWithChildren<{modal: ReactElement|null, setModal: Dispatch>}>) { + return <> + {props.modal &&
      props.setModal(null)}> +
      + e.stopPropagation()}> + {props.modal} + +
      +
      } + + {props.children} + ; +} diff --git a/src/App/PersistentDetails.tsx b/src/App/PersistentDetails.tsx index 4d24bb0..c2f553b 100644 --- a/src/App/PersistentDetails.tsx +++ b/src/App/PersistentDetails.tsx @@ -1,4 +1,4 @@ -import { usePersistentState } from "@/App/persistent_state" +import { usePersistentState } from "@/hooks/usePersistentState" import { DetailsHTMLAttributes, Dispatch, PropsWithChildren, SetStateAction } from "react"; type Props = { diff --git a/src/App/Plant/DigitalWatch/DigitalWatch.tsx b/src/App/Plant/DigitalWatch/DigitalWatch.tsx index 9b41f94..3cb5f55 100644 --- a/src/App/Plant/DigitalWatch/DigitalWatch.tsx +++ b/src/App/Plant/DigitalWatch/DigitalWatch.tsx @@ -1,4 +1,4 @@ -import { useAudioContext } from "@/App/useAudioContext"; +import { useAudioContext } from "@/hooks/useAudioContext"; import { ConcreteSyntax } from "@/App/VisualEditor/VisualEditor"; import { detectConnections } from "@/statecharts/detect_connections"; import { parseStatechart } from "@/statecharts/parser"; diff --git a/src/App/Plant/Microwave/Microwave.tsx b/src/App/Plant/Microwave/Microwave.tsx index 516b444..bc50993 100644 --- a/src/App/Plant/Microwave/Microwave.tsx +++ b/src/App/Plant/Microwave/Microwave.tsx @@ -12,7 +12,7 @@ import { RT_Statechart } from "@/statecharts/runtime_types"; import { memo, useEffect } from "react"; import "./Microwave.css"; -import { useAudioContext } from "../../useAudioContext"; +import { useAudioContext } from "../../../hooks/useAudioContext"; import { makeStatechartPlant, PlantRenderProps, StatechartPlantSpec } from "../Plant"; import { detectConnections } from "@/statecharts/detect_connections"; import { parseStatechart } from "@/statecharts/parser"; diff --git a/src/App/Plant/Plant.ts b/src/App/Plant/Plant.ts index 444c848..afa26ef 100644 --- a/src/App/Plant/Plant.ts +++ b/src/App/Plant/Plant.ts @@ -3,7 +3,6 @@ import { Statechart } from "@/statecharts/abstract_syntax"; import { EventTrigger } from "@/statecharts/label_ast"; import { BigStep, RaisedEvent, RT_Statechart } from "@/statecharts/runtime_types"; import { statechartExecution, TimedReactive } from "@/statecharts/timed_reactive"; -import { setsEqual } from "@/util/util"; export type PlantRenderProps = { state: StateType, diff --git a/src/App/Plant/TrafficLight/TrafficLight.tsx b/src/App/Plant/TrafficLight/TrafficLight.tsx index fb47f48..5c5c833 100644 --- a/src/App/Plant/TrafficLight/TrafficLight.tsx +++ b/src/App/Plant/TrafficLight/TrafficLight.tsx @@ -13,7 +13,7 @@ import { ConcreteSyntax } from "@/App/VisualEditor/VisualEditor"; import { detectConnections } from "@/statecharts/detect_connections"; import { makeStatechartPlant, PlantRenderProps, StatechartPlantSpec } from "../Plant"; import { RT_Statechart } from "@/statecharts/runtime_types"; -import { useAudioContext } from "@/App/useAudioContext"; +import { useAudioContext } from "@/hooks/useAudioContext"; import { memo, useEffect } from "react"; import { objectsEqual } from "@/util/util"; diff --git a/src/App/RTHistory.tsx b/src/App/SideBar/RTHistory.tsx similarity index 94% rename from src/App/RTHistory.tsx rename to src/App/SideBar/RTHistory.tsx index 938867d..7e69844 100644 --- a/src/App/RTHistory.tsx +++ b/src/App/SideBar/RTHistory.tsx @@ -1,10 +1,10 @@ import { Dispatch, memo, SetStateAction, useCallback } from "react"; -import { Statechart, stateDescription } from "../statecharts/abstract_syntax"; -import { Mode, RaisedEvent, RT_Event } from "../statecharts/runtime_types"; -import { formatTime } from "../util/util"; -import { TimeMode, timeTravel } from "../statecharts/time"; -import { BigStepCause, TraceItem, TraceState } from "./App"; +import { Statechart, stateDescription } from "../../statecharts/abstract_syntax"; +import { Mode, RaisedEvent, RT_Event } from "../../statecharts/runtime_types"; +import { formatTime } from "../../util/util"; +import { TimeMode, timeTravel } from "../../statecharts/time"; import { Environment } from "@/statecharts/environment"; +import { BigStepCause, TraceItem, TraceState } from "../hooks/useSimulator"; type RTHistoryProps = { trace: TraceState|null, diff --git a/src/App/ShowAST.tsx b/src/App/SideBar/ShowAST.tsx similarity index 92% rename from src/App/ShowAST.tsx rename to src/App/SideBar/ShowAST.tsx index 8657331..6c240ad 100644 --- a/src/App/ShowAST.tsx +++ b/src/App/SideBar/ShowAST.tsx @@ -1,7 +1,9 @@ -import { ConcreteState, UnstableState, stateDescription, Transition } from "../statecharts/abstract_syntax"; -import { Action, EventTrigger, Expression } from "../statecharts/label_ast"; - -import "./AST.css"; +import BoltIcon from '@mui/icons-material/Bolt'; +import { memo, useEffect } from "react"; +import { usePersistentState } from "../../hooks/usePersistentState"; +import { ConcreteState, stateDescription, Transition, UnstableState } from "../../statecharts/abstract_syntax"; +import { Action, EventTrigger, Expression } from "../../statecharts/label_ast"; +import { KeyInfoHidden, KeyInfoVisible } from "../TopPanel/KeyInfo"; export function ShowTransition(props: {transition: Transition}) { return <>➝ {stateDescription(props.transition.tgt)}; @@ -46,10 +48,6 @@ export const ShowAST = memo(function ShowASTx(props: {root: ConcreteState | Unst ; }); -import BoltIcon from '@mui/icons-material/Bolt'; -import { KeyInfoHidden, KeyInfoVisible } from "./TopPanel/KeyInfo"; -import { memo, useEffect } from "react"; -import { usePersistentState } from "./persistent_state"; export function ShowInputEvents({inputEvents, onRaise, disabled, showKeys}: {inputEvents: EventTrigger[], onRaise: (e: string, p: any) => void, disabled: boolean, showKeys: boolean}) { const raiseHandlers = inputEvents.map(({event}) => { diff --git a/src/App/AST.css b/src/App/SideBar/SideBar.css similarity index 100% rename from src/App/AST.css rename to src/App/SideBar/SideBar.css diff --git a/src/App/SideBar.tsx b/src/App/SideBar/SideBar.tsx similarity index 98% rename from src/App/SideBar.tsx rename to src/App/SideBar/SideBar.tsx index ee2714b..27d42af 100644 --- a/src/App/SideBar.tsx +++ b/src/App/SideBar/SideBar.tsx @@ -8,14 +8,15 @@ import { Conns } from '@/statecharts/timed_reactive'; import { Dispatch, Ref, SetStateAction, useEffect, useRef, useState } from 'react'; import { Statechart } from '@/statecharts/abstract_syntax'; import { ShowAST, ShowInputEvents, ShowInternalEvents, ShowOutputEvents } from './ShowAST'; -import { Plant } from './Plant/Plant'; +import { Plant } from '../Plant/Plant'; import { checkProperty, PropertyCheckResult } from './check_property'; -import { Setters } from './makePartialSetter'; +import { Setters } from '../makePartialSetter'; import { RTHistory } from './RTHistory'; -import { BigStepCause, TraceState } from './useSimulator'; -import { plants, UniversalPlantState } from './plants'; +import { BigStepCause, TraceState } from '../hooks/useSimulator'; +import { plants, UniversalPlantState } from '../plants'; import { TimeMode } from '@/statecharts/time'; -import { PersistentDetails } from './PersistentDetails'; +import { PersistentDetails } from '../PersistentDetails'; +import "./SideBar.css"; type SavedTraces = [string, BigStepCause[]][]; diff --git a/src/App/check_property.ts b/src/App/SideBar/check_property.ts similarity index 96% rename from src/App/check_property.ts rename to src/App/SideBar/check_property.ts index 110112b..24a41cb 100644 --- a/src/App/check_property.ts +++ b/src/App/SideBar/check_property.ts @@ -1,6 +1,6 @@ import { RT_Statechart } from "@/statecharts/runtime_types"; -import { Plant } from "./Plant/Plant"; -import { TraceItem } from "./useSimulator"; +import { Plant } from "../Plant/Plant"; +import { TraceItem } from "../hooks/useSimulator"; // const endpoint = "http://localhost:15478/check_property"; const endpoint = "https://deemz.org/apis/mtl-aas/check_property"; diff --git a/src/App/TopPanel/TopPanel.tsx b/src/App/TopPanel/TopPanel.tsx index ed59b0a..a8272b2 100644 --- a/src/App/TopPanel/TopPanel.tsx +++ b/src/App/TopPanel/TopPanel.tsx @@ -18,10 +18,10 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow'; import SkipNextIcon from '@mui/icons-material/SkipNext'; import StopIcon from '@mui/icons-material/Stop'; import { InsertModes } from "./InsertModes"; -import { usePersistentState } from "@/App/persistent_state"; +import { usePersistentState } from "@/hooks/usePersistentState"; import { RotateButtons } from "./RotateButtons"; import { SpeedControl } from "./SpeedControl"; -import { TraceState } from "../useSimulator"; +import { TraceState } from "../hooks/useSimulator"; export type TopPanelProps = { trace: TraceState | null, diff --git a/src/App/VisualEditor/VisualEditor.tsx b/src/App/VisualEditor/VisualEditor.tsx index 9741520..8f2a191 100644 --- a/src/App/VisualEditor/VisualEditor.tsx +++ b/src/App/VisualEditor/VisualEditor.tsx @@ -1,21 +1,20 @@ -import { Dispatch, memo, ReactElement, SetStateAction, useCallback, useEffect, useRef, useState } from "react"; +import { Dispatch, memo, ReactElement, SetStateAction, useCallback, useEffect, useRef } from "react"; -import { InsertMode } from "../TopPanel/InsertModes"; import { Mode } from "@/statecharts/runtime_types"; import { arraysEqual, objectsEqual, setsEqual } from "@/util/util"; import { Arrow, ArrowPart, Diamond, History, RectSide, Rountangle, Text } from "../../statecharts/concrete_syntax"; import { Connections } from "../../statecharts/detect_connections"; import { TraceableError } from "../../statecharts/parser"; import { ArcDirection, arcDirection } from "../../util/geometry"; +import { InsertMode } from "../TopPanel/InsertModes"; import { ArrowSVG } from "./ArrowSVG"; import { DiamondSVG } from "./DiamondSVG"; import { HistorySVG } from "./HistorySVG"; import { RountangleSVG } from "./RountangleSVG"; import { TextSVG } from "./TextSVG"; -import { useCopyPaste } from "./useCopyPaste"; - import "./VisualEditor.css"; -import { useMouse } from "./useMouse"; +import { useCopyPaste } from "./hooks/useCopyPaste"; +import { useMouse } from "./hooks/useMouse"; export type ConcreteSyntax = { rountangles: Rountangle[]; diff --git a/src/App/VisualEditor/useCopyPaste.ts b/src/App/VisualEditor/hooks/useCopyPaste.ts similarity index 98% rename from src/App/VisualEditor/useCopyPaste.ts rename to src/App/VisualEditor/hooks/useCopyPaste.ts index e560cc0..21e8f9b 100644 --- a/src/App/VisualEditor/useCopyPaste.ts +++ b/src/App/VisualEditor/hooks/useCopyPaste.ts @@ -1,6 +1,6 @@ import { Arrow, Diamond, Rountangle, Text, History } from "@/statecharts/concrete_syntax"; import { ClipboardEvent, Dispatch, SetStateAction, useCallback, useEffect } from "react"; -import { Selection, VisualEditorState } from "./VisualEditor"; +import { Selection, VisualEditorState } from "../VisualEditor"; import { addV2D } from "@/util/geometry"; // const offset = {x: 40, y: 40}; diff --git a/src/App/VisualEditor/useMouse.tsx b/src/App/VisualEditor/hooks/useMouse.tsx similarity index 98% rename from src/App/VisualEditor/useMouse.tsx rename to src/App/VisualEditor/hooks/useMouse.tsx index 9ef94e5..1e917f7 100644 --- a/src/App/VisualEditor/useMouse.tsx +++ b/src/App/VisualEditor/hooks/useMouse.tsx @@ -2,10 +2,10 @@ import { rountangleMinSize } from "@/statecharts/concrete_syntax"; import { addV2D, area, isEntirelyWithin, normalizeRect, scaleV2D, subtractV2D, transformLine, transformRect } from "@/util/geometry"; import { getBBoxInSvgCoords } from "@/util/svg_helper"; import { Dispatch, useCallback, useEffect, useState } from "react"; -import { MIN_ROUNTANGLE_SIZE } from "../parameters"; -import { InsertMode } from "../TopPanel/InsertModes"; -import { Selecting, SelectingState } from "./Selection"; -import { Selection, VisualEditorState } from "./VisualEditor"; +import { MIN_ROUNTANGLE_SIZE } from "../../parameters"; +import { InsertMode } from "../../TopPanel/InsertModes"; +import { Selecting, SelectingState } from "../Selection"; +import { Selection, VisualEditorState } from "../VisualEditor"; export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoom: number, refSVG: {current: SVGSVGElement|null}, state: VisualEditorState, setState: Dispatch<(v: VisualEditorState) => VisualEditorState>, deleteSelection: () => void) { const [dragging, setDragging] = useState(false); diff --git a/src/App/useEditor.ts b/src/App/hooks/useEditor.ts similarity index 97% rename from src/App/useEditor.ts rename to src/App/hooks/useEditor.ts index e1ca293..058a5d5 100644 --- a/src/App/useEditor.ts +++ b/src/App/hooks/useEditor.ts @@ -1,8 +1,7 @@ import { addV2D, rotateLine90CCW, rotateLine90CW, rotatePoint90CCW, rotatePoint90CW, rotateRect90CCW, rotateRect90CW, scaleV2D, subtractV2D, Vec2D } from "@/util/geometry"; -import { HISTORY_RADIUS } from "./parameters"; +import { HISTORY_RADIUS } from "../parameters"; import { Dispatch, SetStateAction, useCallback, useEffect } from "react"; -import { EditHistory } from "./App"; -import { VisualEditorState } from "./VisualEditor/VisualEditor"; +import { EditHistory } from "../App"; export function useEditor(setEditHistory: Dispatch>) { useEffect(() => { diff --git a/src/App/useSimulator.ts b/src/App/hooks/useSimulator.ts similarity index 98% rename from src/App/useSimulator.ts rename to src/App/hooks/useSimulator.ts index 9844455..fa07dd0 100644 --- a/src/App/useSimulator.ts +++ b/src/App/hooks/useSimulator.ts @@ -3,9 +3,9 @@ import { RuntimeError } from "@/statecharts/interpreter"; import { BigStep, RaisedEvent } from "@/statecharts/runtime_types"; import { Conns, coupledExecution, statechartExecution } from "@/statecharts/timed_reactive"; import { useCallback, useEffect, useMemo, useState } from "react"; -import { Plant } from "./Plant/Plant"; +import { Plant } from "../Plant/Plant"; import { getSimTime, getWallClkDelay, TimeMode } from "@/statecharts/time"; -import { UniversalPlantState } from "./plants"; +import { UniversalPlantState } from "../plants"; type CoupledState = { sc: BigStep, @@ -107,6 +107,7 @@ export function useSimulator(ast: Statechart|null, plant: Plant { + // console.log('time effect:', time, currentTraceItem); let timeout: NodeJS.Timeout | undefined; if (currentTraceItem !== null && cE !== null) { if (currentTraceItem.kind === "bigstep") { diff --git a/src/App/makePartialSetter.ts b/src/App/makePartialSetter.ts index a9ef4a7..d3d5109 100644 --- a/src/App/makePartialSetter.ts +++ b/src/App/makePartialSetter.ts @@ -3,16 +3,16 @@ import { Dispatch, SetStateAction, useCallback, useMemo } from "react"; export function makePartialSetter(fullSetter: Dispatch>, key: K): Dispatch> { return (newValueOrCallback: T[K] | ((newValue: T[K]) => T[K])) => { fullSetter(oldFullValue => { - if (typeof newValueOrCallback === 'function') { + const newValue = (typeof newValueOrCallback === 'function') ? (newValueOrCallback as (newValue: T[K]) => T[K])(oldFullValue[key] as T[K]) : newValueOrCallback as T[K]; + if (newValue === oldFullValue[key]) { + return oldFullValue; + } + else { return { ...oldFullValue, - [key]: (newValueOrCallback as (newValue: T[K]) => T[K])(oldFullValue[key] as T[K]), + [key]: newValue, } } - return { - ...oldFullValue, - [key]: newValueOrCallback as T[K], - } }) }; } @@ -21,16 +21,16 @@ export type Setters = { [K in keyof T as `set${Capitalize>}`]: Dispatch>; } -export function makeIndividualSetters( +export function makeAllSetters( fullSetter: Dispatch>, keys: (keyof T)[], ): Setters { // @ts-ignore - return useMemo(() => + return useMemo(() => { + console.log('creating setters for App'); // @ts-ignore - Object.fromEntries(keys.map((key: string) => { + return Object.fromEntries(keys.map((key: string) => { return [`set${key.charAt(0).toUpperCase()}${key.slice(1)}`, makePartialSetter(fullSetter, key)]; - })), - [fullSetter] - ); + })); + }, [fullSetter]); } diff --git a/src/App/useAudioContext.ts b/src/hooks/useAudioContext.ts similarity index 100% rename from src/App/useAudioContext.ts rename to src/hooks/useAudioContext.ts diff --git a/src/hooks/useDetectChange.ts b/src/hooks/useDetectChange.ts new file mode 100644 index 0000000..3ef07c4 --- /dev/null +++ b/src/hooks/useDetectChange.ts @@ -0,0 +1,8 @@ +import { useEffect } from "react"; + +// useful for debugging +export function useDetectChange(expr: any, name: string) { + useEffect(() => { + console.log(name, 'changed to:', expr); + }, [expr]); +} diff --git a/src/App/persistent_state.ts b/src/hooks/usePersistentState.ts similarity index 100% rename from src/App/persistent_state.ts rename to src/hooks/usePersistentState.ts diff --git a/src/App/useUrlHashState.ts b/src/hooks/useUrlHashState.ts similarity index 83% rename from src/App/useUrlHashState.ts rename to src/hooks/useUrlHashState.ts index 3859d54..d442552 100644 --- a/src/App/useUrlHashState.ts +++ b/src/hooks/useUrlHashState.ts @@ -1,17 +1,17 @@ -import { useEffect } from "react"; +import { useEffect, useLayoutEffect } from "react"; // persist state in URL hash -export function useUrlHashState(recoverCallback: (recoveredState: T) => void): (toPersist: T) => void { +export function useUrlHashState(recoverCallback: (recoveredState: (T|null)) => void): (toPersist: T) => void { // recover editor state from URL - we need an effect here because decompression is asynchronous - useEffect(() => { + // layout effect because we want to run it before rendering the first frame + useLayoutEffect(() => { console.log('recovering state...'); const compressedState = window.location.hash.slice(1); if (compressedState.length === 0) { // empty URL hash console.log("no state to recover"); - // setEditHistory(() => ({current: emptyState, history: [], future: []})); - return; + return recoverCallback(null); } let compressedBuffer; try { @@ -19,8 +19,7 @@ export function useUrlHashState(recoverCallback: (recoveredState: T) => void) } catch (e) { // probably invalid base64 console.error("failed to recover state:", e); - // setEditHistory(() => ({current: emptyState, history: [], future: []})); - return; + return recoverCallback(null); } const ds = new DecompressionStream("deflate"); const writer = ds.writable.getWriter(); @@ -29,12 +28,13 @@ export function useUrlHashState(recoverCallback: (recoveredState: T) => void) new Response(ds.readable).arrayBuffer() .then(decompressedBuffer => { const recoveredState = JSON.parse(new TextDecoder().decode(decompressedBuffer)); + console.log('successfully recovered state'); recoverCallback(recoveredState); }) .catch(e => { // any other error: invalid JSON, or decompression failed. console.error("failed to recover state:", e); - // setEditHistory({current: emptyState, history: [], future: []}); + recoverCallback(null); }); }, []); From 848a13e875680efcea2fb66e96e321888851abb6 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Thu, 13 Nov 2025 10:59:34 +0100 Subject: [PATCH 12/30] update assignment: alternate and/or states as in the theory --- teaching/mosis25/assignment.html | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/teaching/mosis25/assignment.html b/teaching/mosis25/assignment.html index 1b41ba9..8f623c4 100644 --- a/teaching/mosis25/assignment.html +++ b/teaching/mosis25/assignment.html @@ -363,8 +363,14 @@ meaning: "as long as the top-right button is pressed, the light should be on, an

      Additional resources

      From 9646d716c696a3805c4609d7ea8df198331ecc5a Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Thu, 13 Nov 2025 13:05:22 +0100 Subject: [PATCH 13/30] editor: shift or ctrl key to append selection --- src/App/VisualEditor/VisualEditor.tsx | 28 ++-- src/App/VisualEditor/hooks/useMouse.tsx | 179 ++++++++++++++---------- 2 files changed, 118 insertions(+), 89 deletions(-) diff --git a/src/App/VisualEditor/VisualEditor.tsx b/src/App/VisualEditor/VisualEditor.tsx index 8f2a191..850108e 100644 --- a/src/App/VisualEditor/VisualEditor.tsx +++ b/src/App/VisualEditor/VisualEditor.tsx @@ -30,21 +30,19 @@ export type VisualEditorState = ConcreteSyntax & { }; export type RountangleSelectable = { - // kind: "rountangle"; - parts: RectSide[]; + part: RectSide; uid: string; } type ArrowSelectable = { - // kind: "arrow"; - parts: ArrowPart[]; + part: ArrowPart; uid: string; } type TextSelectable = { - parts: ["text"]; + part: "text"; uid: string; } type HistorySelectable = { - parts: ["history"]; + part: "history"; uid: string; } type Selectable = RountangleSelectable | ArrowSelectable | TextSelectable | HistorySelectable; @@ -113,12 +111,10 @@ export const VisualEditor = memo(function VisualEditor({state, setState, conns, for (const textUid of texts) { textsToHighlight[textUid] = true; } - for (const part of selected.parts) { - const arrows = conns.side2ArrowMap.get(selected.uid + '/' + part) || []; - if (arrows) { - for (const [arrowPart, arrowUid] of arrows) { - arrowsToHighlight[arrowUid] = true; - } + const arrows = conns.side2ArrowMap.get(selected.uid + '/' + selected.part) || []; + if (arrows) { + for (const [arrowPart, arrowUid] of arrows) { + arrowsToHighlight[arrowUid] = true; } } const arrow2 = conns.text2ArrowMap.get(selected.uid); @@ -229,7 +225,7 @@ export const VisualEditor = memo(function VisualEditor({state, setState, conns, return a.uid === arrow.uid)?.parts as ArrowPart[] || []} + selected={selection.filter(a => a.uid === arrow.uid).map(({part})=> part as ArrowPart)} error={errors .filter(({shapeUid}) => shapeUid === arrow.uid) .map(({message}) => message).join(', ')} @@ -252,7 +248,7 @@ const Rountangles = memo(function Rountangles({rountangles, selection, sidesToHi return r.uid === rountangle.uid)?.parts as RectSide[] || []} + selected={selection.filter(r => r.uid === rountangle.uid).map(({part}) => part as RectSide)} highlight={[...(sidesToHighlight[rountangle.uid] || []), ...(rountanglesToHighlight[rountangle.uid]?["left","right","top","bottom"]:[]) as RectSide[]]} error={errors .filter(({shapeUid}) => shapeUid === rountangle.uid) @@ -273,7 +269,7 @@ const Diamonds = memo(function Diamonds({diamonds, selection, sidesToHighlight, r.uid === diamond.uid)?.parts as RectSide[] || []} + selected={selection.filter(r => r.uid === diamond.uid).map(({part})=>part as RectSide)} highlight={[...(sidesToHighlight[diamond.uid] || []), ...(rountanglesToHighlight[diamond.uid]?["left","right","top","bottom"]:[]) as RectSide[]]} error={errors .filter(({shapeUid}) => shapeUid === diamond.uid) @@ -294,7 +290,7 @@ const Texts = memo(function Texts({texts, selection, textsToHighlight, errors, o key={txt.uid} error={errors.find(({shapeUid}) => txt.uid === shapeUid)} text={txt} - selected={Boolean(selection.find(s => s.uid === txt.uid)?.parts?.length)} + selected={Boolean(selection.filter(s => s.uid === txt.uid).length)} highlight={textsToHighlight.hasOwnProperty(txt.uid)} onEdit={onEditText} setModal={setModal} diff --git a/src/App/VisualEditor/hooks/useMouse.tsx b/src/App/VisualEditor/hooks/useMouse.tsx index 1e917f7..4c1168f 100644 --- a/src/App/VisualEditor/hooks/useMouse.tsx +++ b/src/App/VisualEditor/hooks/useMouse.tsx @@ -9,6 +9,9 @@ import { Selection, VisualEditorState } from "../VisualEditor"; export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoom: number, refSVG: {current: SVGSVGElement|null}, state: VisualEditorState, setState: Dispatch<(v: VisualEditorState) => VisualEditorState>, deleteSelection: () => void) { const [dragging, setDragging] = useState(false); + const [shiftOrCtrlPressed, setShiftOrCtrlPressed] = useState(false); + + console.log(shiftOrCtrlPressed); // not null while the user is making a selection const [selectingState, setSelectingState] = useState(null); @@ -29,7 +32,7 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo const currentPointer = getCurrentPointer(e); if (e.button === 2) { makeCheckPoint(); - // ignore selection, middle mouse button always inserts + // ignore selection, right mouse button always inserts setState(state => { const newID = state.nextID.toString(); if (insertMode === "and" || insertMode === "or") { @@ -43,7 +46,7 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo kind: insertMode, }], nextID: state.nextID+1, - selection: [{uid: newID, parts: ["bottom", "right"]}], + selection: [{uid: newID, part: "bottom"}, {uid: newID, part: "right"}], }; } else if (insertMode === "pseudo") { @@ -55,7 +58,7 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo size: MIN_ROUNTANGLE_SIZE, }], nextID: state.nextID+1, - selection: [{uid: newID, parts: ["bottom", "right"]}], + selection: [{uid: newID, part: "bottom"}, {uid: newID, part: "right"}], }; } else if (insertMode === "shallow" || insertMode === "deep") { @@ -67,7 +70,7 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo topLeft: currentPointer, }], nextID: state.nextID+1, - selection: [{uid: newID, parts: ["history"]}], + selection: [{uid: newID, part: "history"}], } } else if (insertMode === "transition") { @@ -79,7 +82,7 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo end: currentPointer, }], nextID: state.nextID+1, - selection: [{uid: newID, parts: ["end"]}], + selection: [{uid: newID, part: "end"}], } } else if (insertMode === "text") { @@ -91,7 +94,7 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo topLeft: currentPointer, }], nextID: state.nextID+1, - selection: [{uid: newID, parts: ["text"]}], + selection: [{uid: newID, part: "text"}], } } throw new Error("unreachable, mode=" + insertMode); // shut up typescript @@ -101,38 +104,40 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo } if (e.button === 0) { - // left mouse button on a shape will drag that shape (and everything else that's selected). if the shape under the pointer was not in the selection then the selection is reset to contain only that shape. - const uid = e.target?.dataset.uid; - const parts: string[] = e.target?.dataset.parts?.split(' ').filter((p:string) => p!=="") || []; - if (uid && parts.length > 0) { - makeCheckPoint(); + if (!shiftOrCtrlPressed) { + // left mouse button on a shape will drag that shape (and everything else that's selected). if the shape under the pointer was not in the selection then the selection is reset to contain only that shape. + const uid = e.target?.dataset.uid; + const parts: string[] = e.target?.dataset.parts?.split(' ').filter((p:string) => p!=="") || []; + if (uid && parts.length > 0) { + makeCheckPoint(); - // if the mouse button is pressed outside of the current selection, we reset the selection to whatever shape the mouse is on - let allPartsInSelection = true; - for (const part of parts) { - if (!(selection.find(s => s.uid === uid)?.parts || [] as string[]).includes(part)) { - allPartsInSelection = false; - break; + // if the mouse button is pressed outside of the current selection, we reset the selection to whatever shape the mouse is on + let allPartsInSelection = true; + for (const part of parts) { + // is there anything in our existing selection that is not under the cursor? + if (!(selection.some(s => (s.uid === uid) && (s.part === part)))) { + allPartsInSelection = false; + break; + } } + if (!allPartsInSelection) { + if (e.target.classList.contains("helper")) { + setSelection(() => parts.map(part => ({uid, part})) as Selection); + } + else { + setDragging(false); + setSelectingState({ + topLeft: currentPointer, + size: {x: 0, y: 0}, + }); + setSelection(() => []); + return; + } + } + // start dragging + setDragging(true); + return; } - if (!allPartsInSelection) { - if (e.target.classList.contains("helper")) { - setSelection(() => [{uid, parts}] as Selection); - } - else { - setDragging(false); - setSelectingState({ - topLeft: currentPointer, - size: {x: 0, y: 0}, - }); - setSelection(() => []); - return; - } - } - - // start dragging - setDragging(true); - return; } } @@ -142,40 +147,45 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo topLeft: currentPointer, size: {x: 0, y: 0}, }); - setSelection(() => []); - }, [getCurrentPointer, makeCheckPoint, insertMode, selection]); + if (!shiftOrCtrlPressed) { + setSelection(() => []); + } + }, [getCurrentPointer, makeCheckPoint, insertMode, selection, shiftOrCtrlPressed]); const onMouseMove = useCallback((e: {pageX: number, pageY: number, movementX: number, movementY: number}) => { const currentPointer = getCurrentPointer(e); if (dragging) { // const pointerDelta = subtractV2D(currentPointer, dragging.lastMousePos); const pointerDelta = {x: e.movementX/zoom, y: e.movementY/zoom}; + const getParts = (uid: string) => { + return state.selection.filter(s => s.uid === uid).map(s => s.part); + } setState(state => ({ ...state, rountangles: state.rountangles.map(r => { - const parts = state.selection.find(selected => selected.uid === r.uid)?.parts || []; - if (parts.length === 0) { + const selectedParts = getParts(r.uid); + if (selectedParts.length === 0) { return r; } return { ...r, - ...transformRect(r, parts, pointerDelta), + ...transformRect(r, selectedParts, pointerDelta), }; }) .toSorted((a,b) => area(b) - area(a)), // sort: smaller rountangles are drawn on top diamonds: state.diamonds.map(d => { - const parts = state.selection.find(selected => selected.uid === d.uid)?.parts || []; - if (parts.length === 0) { + const selectedParts = getParts(d.uid); + if (selectedParts.length === 0) { return d; } return { ...d, - ...transformRect(d, parts, pointerDelta), + ...transformRect(d, selectedParts, pointerDelta), } }), history: state.history.map(h => { - const parts = state.selection.find(selected => selected.uid === h.uid)?.parts || []; - if (parts.length === 0) { + const selectedParts = getParts(h.uid); + if (selectedParts.length === 0) { return h; } return { @@ -184,18 +194,18 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo } }), arrows: state.arrows.map(a => { - const parts = state.selection.find(selected => selected.uid === a.uid)?.parts || []; - if (parts.length === 0) { + const selectedParts = getParts(a.uid); + if (selectedParts.length === 0) { return a; } return { ...a, - ...transformLine(a, parts, pointerDelta), + ...transformLine(a, selectedParts, pointerDelta), } }), texts: state.texts.map(t => { - const parts = state.selection.find(selected => selected.uid === t.uid)?.parts || []; - if (parts.length === 0) { + const selectedParts = getParts(t.uid); + if (selectedParts.length === 0) { return t; } return { @@ -239,12 +249,12 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo if (selectingState.size.x === 0 && selectingState.size.y === 0) { const uid = e.target?.dataset.uid; if (uid) { - const parts = e.target?.dataset.parts.split(' ').filter((p: string) => p!==""); + const parts = e.target?.dataset.parts.split(' ').filter((p: string) => p!=="") || []; if (uid) { - setSelection(() => [{ - uid, - parts, - }]); + setSelection(oldSelection => [ + ...oldSelection, + ...parts.map((part: string) => ({uid, part})), + ]); } } } @@ -261,26 +271,45 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo return isEntirelyWithin(scaledBBox, normalizedSS); }).filter(el => !el.classList.contains("corner")); - const uidToParts = new Map(); - for (const shape of shapesInSelection) { - const uid = shape.dataset.uid; - if (uid) { - const parts: Set = uidToParts.get(uid) || new Set(); - for (const part of shape.dataset.parts?.split(' ') || []) { - parts.add(part); + // @ts-ignore + setSelection(oldSelection => { + const newSelection = []; + const common = []; + for (const shape of shapesInSelection) { + const uid = shape.dataset.uid; + if (uid) { + const parts = shape.dataset.parts?.split(' ') || []; + for (const part of parts) { + if (oldSelection.some(({uid: oldUid, part: oldPart}) => + uid === oldUid && part === oldPart)) { + common.push({uid, part}); + + } + else { + newSelection.push({uid, part}); + } + } } - uidToParts.set(uid, parts); } - } - setSelection(() => [...uidToParts.entries()].map(([uid,parts]) => ({ - uid, - parts: [...parts], - }))); + return [...oldSelection, ...newSelection]; + }) } } setSelectingState(null); // no longer making a selection }, [dragging, selectingState, refSVG.current]); + const trackShiftKey = useCallback((e: KeyboardEvent) => { + // @ts-ignore + if (["INPUT", "TEXTAREA", "SELECT"].includes(e.target?.tagName)) return; + + if (e.shiftKey || e.ctrlKey) { + setShiftOrCtrlPressed(true); + } + else { + setShiftOrCtrlPressed(false); + } + }, []); + const onKeyDown = useCallback((e: KeyboardEvent) => { // don't capture keyboard events when focused on an input element: // @ts-ignore @@ -318,11 +347,11 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo ...state, // @ts-ignore selection: [ - ...state.rountangles.map(r => ({uid: r.uid, parts: ["left", "top", "right", "bottom"]})), - ...state.diamonds.map(d => ({uid: d.uid, parts: ["left", "top", "right", "bottom"]})), - ...state.arrows.map(a => ({uid: a.uid, parts: ["start", "end"]})), - ...state.texts.map(t => ({uid: t.uid, parts: ["text"]})), - ...state.history.map(h => ({uid: h.uid, parts: ["history"]})), + ...state.rountangles.map(r => ["left", "top", "right", "bottom"].map(part => ({uid: r.uid, part}))), + ...state.diamonds.map(d => ["left", "top", "right", "bottom"].map(part => ({uid: d.uid, part}))), + ...state.arrows.map(a => ["start", "end"].map(part => ({uid: a.uid, part}))), + ...state.texts.map(t => ({uid: t.uid, part: "text"})), + ...state.history.map(h => ({uid: h.uid, part: "history"})), ] })) } @@ -334,10 +363,14 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo window.addEventListener("mouseup", onMouseUp); window.addEventListener("mousemove", onMouseMove); window.addEventListener("keydown", onKeyDown); + window.addEventListener("keydown", trackShiftKey); + window.addEventListener("keyup", trackShiftKey); return () => { window.removeEventListener("mousemove", onMouseMove); window.removeEventListener("mouseup", onMouseUp); window.removeEventListener("keydown", onKeyDown); + window.removeEventListener("keydown", trackShiftKey); + window.removeEventListener("keyup", trackShiftKey); }; }, [selectingState, dragging]); From 6efc27453eb311b8fadfe4d650e16c0641b71b8a Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Thu, 13 Nov 2025 19:25:43 +0100 Subject: [PATCH 14/30] new featuregit status dark mode --- src/App/App.css | 64 ++++++++++-------------- src/App/App.tsx | 13 +++-- src/App/BottomPanel/BottomPanel.css | 6 +-- src/App/BottomPanel/BottomPanel.tsx | 4 +- src/App/Modals/About.tsx | 4 +- src/App/SideBar/SideBar.css | 66 ++++++++----------------- src/App/SideBar/check_property.ts | 4 +- src/App/TopPanel/Icons.tsx | 11 ++++- src/App/TopPanel/TopPanel.tsx | 24 ++++++++- src/App/VisualEditor/DiamondSVG.tsx | 3 +- src/App/VisualEditor/VisualEditor.css | 66 ++++++++++++------------- src/App/VisualEditor/hooks/useMouse.tsx | 16 +++--- src/Logo/Logo.tsx | 11 +++++ src/index.css | 46 +++++++++++++++-- 14 files changed, 189 insertions(+), 149 deletions(-) create mode 100644 src/Logo/Logo.tsx diff --git a/src/App/App.css b/src/App/App.css index 51defe8..73965d8 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -1,61 +1,44 @@ -/* details { - padding-left: 20; -} -summary { - margin-left: -20; -} */ - details:has(+ details) { - border-bottom: 1px lightgrey solid; + border-bottom: 1px var(--separator-color) solid; } .runtimeState { padding: 4px; - /* padding-left: 4px; - padding-right: 4px; - padding-top: 2px; - padding-bottom: 2px; */ } .runtimeState:has(+.runtimeState) { - border-bottom: 1px lightgrey solid; + border-bottom: 1px var(--separator-color) solid; } .runtimeState:has(+.runtimeState.active) { border-bottom: 0; } .runtimeState:hover { - /* background-color: rgba(255, 140, 0, 0.2); */ - background-color: rgba(0,0,255,0.2); + background-color: var(--light-accent-color); cursor: pointer; } .runtimeState.active { - background-color: rgba(0,0,255,0.2); - border: solid blue 1px; + background-color: var(--light-accent-color); + border: solid var(--accent-border-color) 1px; } .runtimeState.plantStep:not(.active) { - background-color: #f7f7f7; + background-color: var(--inactive-bg-color); } .runtimeState.plantStep * { - color: grey; + color: var(--inactive-fg-color); } .runtimeState.runtimeError { - background-color: lightpink; - color: darkred; + background-color: var(--error-bg-color); + color: var(--error-color); /* used to be darkred, but this one's a bit lighter */ } .runtimeState.runtimeError.active { - border-color: darkred; + border-color: var(--error-color);/* used to be darkred, but this one's a bit lighter */ } -/* details:not(:has(details)) > summary::marker { - color: white; -} */ - .readonlyTextBox { width: 56; - background-color:"#eee"; text-align: "right"; } @@ -78,20 +61,23 @@ details:has(+ details) { } button { - background-color: #fcfcfc; - border: 1px lightgrey solid; + background-color: var(--button-bg-color); + border: 1px var(--separator-color) solid; } button:not(:disabled):hover { - background-color: rgba(0, 0, 255, 0.2); + background-color: var(--light-accent-color); +} + +button:disabled { + background-color: var(--inactive-bg-color); + color: var(--inactive-fg-color); } button.active { - border: solid blue 1px; - background-color: rgba(0,0,255,0.2); - /* margin-right: 1px; */ - /* margin-left: 0; */ - color: black; + border: solid var(--accent-border-color) 1px; + background-color: var(--light-accent-color); + color: var(--text-color); } .modalOuter { @@ -102,7 +88,7 @@ button.active { justify-content: center; align-items: center; text-align: center; - background-color: rgba(200,200,200,0.7); + background-color: var(--modal-backdrop-color); z-index: 1000; } @@ -110,7 +96,7 @@ button.active { position: relative; text-align: center; display: inline-block; - background-color: white; + background-color: var(--background-color); max-height: 100vh; overflow: auto; } @@ -128,7 +114,7 @@ div.stackHorizontal { div.status { display: inline-block; vertical-align: middle; - background-color: grey; + background-color: var(--status-inactive-color); border-radius: 50%; height: 12px; width: 12px; @@ -141,6 +127,6 @@ div.status.violated { } div.status.satisfied { - background-color: forestgreen; + background-color: var(--status-ok-color); } diff --git a/src/App/App.tsx b/src/App/App.tsx index 9b77e2e..aa38f9a 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -17,6 +17,7 @@ import { useUrlHashState } from "../hooks/useUrlHashState"; import { plants } from "./plants"; import { emptyState } from "@/statecharts/concrete_syntax"; import { ModalOverlay } from "./Modals/ModalOverlay"; +import { usePersistentState } from "@/hooks/usePersistentState"; export type EditHistory = { current: VisualEditorState, @@ -38,10 +39,14 @@ const defaultAppState: AppState = { ...defaultSideBarState, } +export type LightMode = "light" | "auto" | "dark"; + export function App() { const [editHistory, setEditHistory] = useState(null); const [modal, setModal] = useState(null); + const [lightMode, setLightMode] = usePersistentState("lightMode", "auto"); + const {makeCheckPoint, onRedo, onUndo, onRotate} = useEditor(setEditHistory); const editorState = editHistory && editHistory.current; @@ -135,7 +140,8 @@ export function App() { const plantState = currentBigStep && currentBigStep.state.plant || plant.execution.initial()[1]; - return + return
      + {/* top-to-bottom: everything -> bottom panel */}
      @@ -150,7 +156,7 @@ export function App() { style={{flex: '0 0 content'}} > {editHistory && }
      {/* Editor */} @@ -179,7 +185,8 @@ export function App() { {syntaxErrors && }
      - ; + +
      ; } export default App; diff --git a/src/App/BottomPanel/BottomPanel.css b/src/App/BottomPanel/BottomPanel.css index 92c1a48..d0922b3 100644 --- a/src/App/BottomPanel/BottomPanel.css +++ b/src/App/BottomPanel/BottomPanel.css @@ -5,6 +5,6 @@ } .bottom { - border-top: 1px lightgrey solid; - background-color: rgb(255, 249, 235); -} \ No newline at end of file + border-top: 1px var(--separator-color) solid; + background-color: var(--bottom-panel-bg-color); +} diff --git a/src/App/BottomPanel/BottomPanel.tsx b/src/App/BottomPanel/BottomPanel.tsx index c0d02ae..51dcd81 100644 --- a/src/App/BottomPanel/BottomPanel.tsx +++ b/src/App/BottomPanel/BottomPanel.tsx @@ -3,14 +3,14 @@ import { TraceableError } from "../../statecharts/parser"; import "./BottomPanel.css"; -import logo from "../../../artwork/logo-playful.svg"; import { PersistentDetailsLocalStorage } from "../PersistentDetails"; +import { Logo } from "@/Logo/Logo"; export function BottomPanel(props: {errors: TraceableError[]}) { const [greeting, setGreeting] = useState(
      - Welcome to + Welcome to
      ); diff --git a/src/App/Modals/About.tsx b/src/App/Modals/About.tsx index 9595c81..b270b8e 100644 --- a/src/App/Modals/About.tsx +++ b/src/App/Modals/About.tsx @@ -1,9 +1,9 @@ +import { Logo } from "@/Logo/Logo"; import { Dispatch, ReactElement, SetStateAction } from "react"; -import logo from "../../../artwork/logo-playful.svg"; export function About(props: {setModal: Dispatch>}) { return
      -

      +

      StateBuddy is an open source tool for Statechart editing, simulation, (omniscient) debugging and testing.

      diff --git a/src/App/SideBar/SideBar.css b/src/App/SideBar/SideBar.css index f2081f6..b2212da 100644 --- a/src/App/SideBar/SideBar.css +++ b/src/App/SideBar/SideBar.css @@ -1,78 +1,51 @@ -details.active { - border: rgb(192, 125, 0); - background-color:rgb(255, 251, 244); - filter: drop-shadow( 0px 0px 3px rgba(192, 125, 0, 0.856)); -} details > summary { padding: 2px; } -/* these two rules add a bit of padding to an opened
      node */ -/* details:open > summary:has(+ *) { - margin-bottom: 4px; -} -details:open:has(>summary:has(+ *)) { - padding-bottom: 8px; -} */ - details > summary:hover { - background-color: #eee; + background-color: var(--summary-hover-bg-color); cursor: default; } .errorStatus details > summary:hover { - background-color: rgb(102, 0, 0); + background-color: var(--error-hover-bg-color); } .stateTree > * { padding-left: 10px; - /* border: 1px black solid; */ background-color: white; - /* margin-bottom: 4px; */ - /* padding-right: 2px; */ - /* padding-top: 2px; */ - /* padding-bottom: 2px; */ - /* color: black; */ - /* width: fit-content; */ - /* border-radius: 10px; */ } -/* if
      has no children (besides the obvious child), then hide the marker */ -/* details:not(:has(:not(summary))) > summary::marker { - content: " "; -} */ - .outputEvent { - border: 1px black solid; + cursor: default; + border: 1px var(--separator-color) solid; border-radius: 6px; - /* margin-left: 4px; */ padding-left: 2px; padding-right: 2px; - background-color: rgb(230, 249, 255); - color: black; + background-color: var(--output-event-bg-color); + color: var(--text-color); display: inline-block; } .internalEvent { - border: 1px black solid; + cursor: default; + border: 1px var(--separator-color) solid; border-radius: 6px; - /* margin-left: 4px; */ padding-left: 2px; padding-right: 2px; - background-color: rgb(255, 218, 252); - color: black; + background-color: var(--internal-event-bg-color); + color: var(--text-color); display: inline-block; } .inputEvent { - border: 1px black solid; + border: 1px var(--separator-color) solid; border-radius: 6px; - /* margin-left: 4px; */ padding-left: 2px; padding-right: 2px; - background-color: rgb(224, 247, 209); - color: black; + background-color: var(--input-event-bg-color); + color: var(--text-color); display: inline-block; } .inputEvent:disabled { @@ -82,21 +55,24 @@ details > summary:hover { vertical-align: middle; } button.inputEvent:hover:not(:disabled) { - background-color: rgb(195, 224, 176); + background-color: var(--input-event-hover-bg-color); } button.inputEvent:active:not(:disabled) { - background-color: rgb(176, 204, 158); + background-color: var(--input-event-active-bg-color); } .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: rgb(192, 125, 0); */ + /* background-color:rgb(255, 251, 244); */ + border: var(--active-state-border-color) 1px solid; + background-color: var(--active-state-bg-color); + /* filter: drop-shadow( 0px 0px 3px rgba(192, 125, 0, 0.856)); */ border-radius: 6px; margin-left: 4px; padding-left: 2px; padding-right: 2px; display: inline-block; + color: var(--text-color); } /* hr { diff --git a/src/App/SideBar/check_property.ts b/src/App/SideBar/check_property.ts index 24a41cb..f0c779e 100644 --- a/src/App/SideBar/check_property.ts +++ b/src/App/SideBar/check_property.ts @@ -2,8 +2,8 @@ import { RT_Statechart } from "@/statecharts/runtime_types"; import { Plant } from "../Plant/Plant"; import { TraceItem } from "../hooks/useSimulator"; -// const endpoint = "http://localhost:15478/check_property"; -const endpoint = "https://deemz.org/apis/mtl-aas/check_property"; +const endpoint = "http://localhost:15478/check_property"; +// const endpoint = "https://deemz.org/apis/mtl-aas/check_property"; export type PropertyTrace = { timestamp: number, diff --git a/src/App/TopPanel/Icons.tsx b/src/App/TopPanel/Icons.tsx index 97ae50c..0d308e8 100644 --- a/src/App/TopPanel/Icons.tsx +++ b/src/App/TopPanel/Icons.tsx @@ -18,12 +18,19 @@ export function PseudoStateIcon(props: {}) { ${w - 1} ${h / 2}, ${w / 2} ${h - 1}, ${1} ${h / 2}, - `} fill="white" stroke="black" strokeWidth={1.2} /> + `} + style={{ + fill: 'var(--and-state-bg-color', + stroke: 'var(--rountangle-stroke-color', + }} strokeWidth={1.2} /> ; } export function HistoryIcon(props: { kind: "shallow" | "deep"; }) { const w = 20, h = 20; const text = props.kind === "shallow" ? "H" : "H*"; - return {text}; + return {text}; } diff --git a/src/App/TopPanel/TopPanel.tsx b/src/App/TopPanel/TopPanel.tsx index a8272b2..eeb0048 100644 --- a/src/App/TopPanel/TopPanel.tsx +++ b/src/App/TopPanel/TopPanel.tsx @@ -3,12 +3,16 @@ import { TimerElapseEvent, Timers } from "../../statecharts/runtime_types"; import { getSimTime, setPaused, setRealtime, TimeMode } from "../../statecharts/time"; import { InsertMode } from "./InsertModes"; import { About } from "../Modals/About"; -import { EditHistory } from "../App"; +import { EditHistory, LightMode } from "../App"; import { KeyInfoHidden, KeyInfoVisible } from "./KeyInfo"; import { UndoRedoButtons } from "./UndoRedoButtons"; import { ZoomButtons } from "./ZoomButtons"; import { formatTime } from "../../util/util"; +import DarkModeIcon from '@mui/icons-material/DarkMode'; +import LightModeIcon from '@mui/icons-material/LightMode'; +import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto'; + import AccessAlarmIcon from '@mui/icons-material/AccessAlarm'; import CachedIcon from '@mui/icons-material/Cached'; import InfoOutlineIcon from '@mui/icons-material/InfoOutline'; @@ -33,6 +37,8 @@ export type TopPanelProps = { onInit: () => void, onClear: () => void, onBack: () => void, + lightMode: LightMode, + setLightMode: Dispatch>, insertMode: InsertMode, setInsertMode: Dispatch>, setModal: Dispatch>, @@ -45,7 +51,7 @@ export type TopPanelProps = { const ShortCutShowKeys = ~; -export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, onRedo, onRotate, onInit, onClear, onBack, insertMode, setInsertMode, setModal, zoom, setZoom, showKeys, setShowKeys, editHistory}: TopPanelProps) { +export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, onRedo, onRotate, onInit, onClear, onBack, lightMode, setLightMode, insertMode, setInsertMode, setModal, zoom, setZoom, showKeys, setShowKeys, editHistory}: TopPanelProps) { const [displayTime, setDisplayTime] = useState("0.000"); const [timescale, setTimescale] = usePersistentState("timescale", 1); @@ -146,6 +152,20 @@ export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, on }, [config, time, onInit, onChangePaused, setShowKeys, onSkip, onBack, onClear]); return
      + {/* light / dark mode */} +
      + + + +   +
      + {/* shortcuts / about */}
      diff --git a/src/App/VisualEditor/DiamondSVG.tsx b/src/App/VisualEditor/DiamondSVG.tsx index da7b289..f051319 100644 --- a/src/App/VisualEditor/DiamondSVG.tsx +++ b/src/App/VisualEditor/DiamondSVG.tsx @@ -14,7 +14,8 @@ export const DiamondShape = memo(function DiamondShape(props: {size: Vec2D, extr ${minSize.x/2} ${minSize.y}, ${0} ${minSize.y/2} `} - fill="white" + style={{fill: 'var(--and-state-bg-color', stroke: 'var(--rountangle-stroke-color)'}} + // fill="white" stroke="black" strokeWidth={2} {...props.extraAttrs} diff --git a/src/App/VisualEditor/VisualEditor.css b/src/App/VisualEditor/VisualEditor.css index 19801a4..4153853 100644 --- a/src/App/VisualEditor/VisualEditor.css +++ b/src/App/VisualEditor/VisualEditor.css @@ -1,6 +1,6 @@ .svgCanvas { cursor: crosshair; - background-color: #eee; + background-color: var(--or-state-bg-color); } .svgCanvas.dragging { @@ -19,16 +19,15 @@ /* rectangle drawn while a selection is being made */ .selecting { - fill: blue; - fill-opacity: 0.2; + fill: var(--light-accent-color); stroke-width: 1px; - stroke:black; + stroke: var(--accent-border-color); stroke-dasharray: 7 6; } .rountangle { - fill: white; - stroke: black; + fill: var(--and-state-bg-color); + stroke: var(--rountangle-stroke-color); stroke-width: 2px; } @@ -39,9 +38,10 @@ stroke: var(--error-color); } .rountangle.active { - stroke: rgb(205, 133, 0); + stroke: var(--active-state-border-color); /* stroke: none; */ - fill:rgb(255, 240, 214); + /* fill:rgb(255, 240, 214); */ + fill: var(--active-state-bg-color); /* filter: drop-shadow( 2px 2px 2px rgba(124, 37, 10, 0.729)); */ } @@ -54,8 +54,7 @@ line.helper { stroke-width: 16px; } line.helper:hover:not(:active) { - stroke: blue; - stroke-opacity: 0.2; + stroke: var(--light-accent-color); cursor: grab; } @@ -65,8 +64,7 @@ path.helper { stroke-width: 16px; } path.helper:hover:not(:active) { - stroke: blue; - stroke-opacity: 0.2; + stroke: var(--light-accent-color); cursor: grab; } @@ -74,23 +72,22 @@ circle.helper { fill: rgba(0, 0, 0, 0); } circle.helper:hover:not(:active) { - fill: blue; - fill-opacity: 0.2; + fill: var(--light-accent-color); cursor: grab; } .rountangle.or { stroke-dasharray: 7 6; - fill: #eee; + fill: var(--or-state-bg-color); } .arrow { fill: none; - stroke: black; + stroke: var(--rountangle-stroke-color); stroke-width: 2px; } .arrow.selected { - stroke: blue; + stroke: var(--accent-border-color); stroke-width: 3px; } @@ -110,34 +107,29 @@ circle.helper:hover:not(:active) { } line.selected, circle.selected { - fill: rgba(0, 0, 255, 0.2); - /* stroke-dasharray: 7 6; */ - stroke: blue; + fill: var(--light-accent-color); + stroke: var(--accent-border-color); stroke-width: 4px; } .draggableText.selected, .draggableText.selected:hover { - fill: blue; + fill: var(--accent-border-color); font-weight: 600; } -.draggableText:hover:not(:active) { - /* fill: blue; */ - /* cursor: grab; */ -} text.helper { fill: rgba(0,0,0,0); stroke: rgba(0,0,0,0); stroke-width: 6px; } text.helper:hover { - stroke: blue; - stroke-opacity: 0.2; + stroke: var(--light-accent-color); cursor: grab; } .draggableText, .draggableText.highlight { paint-order: stroke; - stroke: white; + fill: var(--text-color); + stroke: var(--background-color); stroke-width: 4px; stroke-linecap: butt; stroke-linejoin: miter; @@ -146,12 +138,16 @@ text.helper:hover { } .draggableText.highlight:not(.selected) { - fill: green; + fill: var(--associated-color); font-weight: 600; } +.draggableText.selected { + fill: var(--accent-border-color); +} + .highlight:not(.selected):not(text) { - stroke: green; + stroke: var(--associated-color); stroke-width: 3px; fill: none; } @@ -160,19 +156,19 @@ text.helper:hover { stroke: var(--error-color); } .arrow.fired { - stroke: rgb(160 0 168); + stroke: var(--fired-transition-color); stroke-width: 3px; animation: blinkTransition 1s; } @keyframes blinkTransition { 0% { - stroke: rgb(255, 128, 9); + stroke: var(--firing-transition-color); stroke-width: 6px; - filter: drop-shadow(0 0 5px rgba(255, 128, 9, 1)); + filter: drop-shadow(0 0 5px var(--firing-transition-color)); } 100% { - stroke: rgb(160 0 168); + stroke: var(--fired-transition-color); } } @@ -191,5 +187,5 @@ g:hover > .errorHover { } text.uid { - fill: lightgrey; + fill: var(--separator-color); } \ No newline at end of file diff --git a/src/App/VisualEditor/hooks/useMouse.tsx b/src/App/VisualEditor/hooks/useMouse.tsx index 4c1168f..335a6f0 100644 --- a/src/App/VisualEditor/hooks/useMouse.tsx +++ b/src/App/VisualEditor/hooks/useMouse.tsx @@ -11,8 +11,6 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo const [dragging, setDragging] = useState(false); const [shiftOrCtrlPressed, setShiftOrCtrlPressed] = useState(false); - console.log(shiftOrCtrlPressed); - // not null while the user is making a selection const [selectingState, setSelectingState] = useState(null); @@ -347,17 +345,19 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo ...state, // @ts-ignore selection: [ - ...state.rountangles.map(r => ["left", "top", "right", "bottom"].map(part => ({uid: r.uid, part}))), - ...state.diamonds.map(d => ["left", "top", "right", "bottom"].map(part => ({uid: d.uid, part}))), - ...state.arrows.map(a => ["start", "end"].map(part => ({uid: a.uid, part}))), - ...state.texts.map(t => ({uid: t.uid, part: "text"})), - ...state.history.map(h => ({uid: h.uid, part: "history"})), - ] + ...state.rountangles.flatMap(r => ["left", "top", "right", "bottom"].map(part => ({uid: r.uid, part}))), + ...state.diamonds.flatMap(d => ["left", "top", "right", "bottom"].map(part => ({uid: d.uid, part}))), + ...state.arrows.flatMap(a => ["start", "end"].map(part => ({uid: a.uid, part}))), + ...state.texts.map(t => ({uid: t.uid, part: "text"})), + ...state.history.map(h => ({uid: h.uid, part: "history"})), + ] })) } } }, [makeCheckPoint, deleteSelection, setState, setDragging]); + console.log(state.selection); + useEffect(() => { // mousemove and mouseup are global event handlers so they keep working when pointer is outside of browser window window.addEventListener("mouseup", onMouseUp); diff --git a/src/Logo/Logo.tsx b/src/Logo/Logo.tsx new file mode 100644 index 0000000..5d064ad --- /dev/null +++ b/src/Logo/Logo.tsx @@ -0,0 +1,11 @@ +// i couldn't find a better way to make the text in the logo adapt to light/dark mode... +export function Logo() { + return + + + ; +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index a9a5d3e..512a0d0 100644 --- a/src/index.css +++ b/src/index.css @@ -5,9 +5,44 @@ html, body { font-size: 10pt; } -body { - /* --error-color: darkred; */ - --error-color: rgb(163, 0, 0); +:root { + color-scheme: light dark; + + --background-color: light-dark(white, rgb(26, 26, 26)); + --text-color: light-dark(black, white); + --error-color: light-dark(rgb(163, 0, 0), rgb(255, 82, 82)); + --error-bg-color: light-dark(lightpink, rgb(75, 0, 0)); + --error-hover-bg-color: light-dark(rgb(102, 0, 0), rgb(102, 0, 0)); + --light-accent-color: light-dark(rgba(0,0,255,0.2), rgba(78, 186, 248, 0.377)); + --accent-border-color: light-dark(blue, rgb(64, 185, 255)); + --separator-color: light-dark(lightgrey, rgb(44, 44, 44)); + --inactive-bg-color: light-dark(#f7f7f7, rgb(29, 29, 29)); + --inactive-fg-color: light-dark(grey, rgb(70, 70, 70)); + --button-bg-color: light-dark(#fcfcfc, rgb(20, 20, 20)); + --modal-backdrop-color: light-dark(rgba(200,200,200,0.7), rgba(59, 7, 7, 0.849)); + --status-inactive-color: light-dark(grey, grey); + --status-ok-color: light-dark(forestgreen, forestgreen); + --or-state-bg-color: light-dark(#eee, #1a1a1a); + --and-state-bg-color: light-dark(white, rgb(0, 0, 0)); + --rountangle-stroke-color: light-dark(black, #d4d4d4); + --active-state-bg-color: light-dark(rgb(255, 240, 214), rgb(53, 37, 18)); + --active-state-border-color: light-dark(rgb(205, 133, 0), rgb(235, 124, 21)); + --fired-transition-color: light-dark(rgb(160, 0, 168), rgb(160, 0, 168)); + --firing-transition-color: light-dark(rgba(255, 128, 9, 1), rgba(255, 128, 9, 1)); + --associated-color: light-dark(green, rgb(186, 245, 119)); + --bottom-panel-bg-color: light-dark(rgb(255, 249, 235), rgb(41, 4, 4)); + --summary-hover-bg-color: light-dark(#eee, #242424); + --internal-event-bg-color: light-dark(rgb(255, 218, 252), rgb(99, 27, 94)); + --input-event-bg-color: light-dark(rgb(224, 247, 209), rgb(59, 95, 37)); + --input-event-hover-bg-color: light-dark(rgb(195, 224, 176), rgb(59, 88, 40)); + --input-event-active-bg-color: light-dark(rgb(176, 204, 158), rgb(77, 117, 53)); + --output-event-bg-color: light-dark(rgb(230, 249, 255), rgb(28, 83, 104)); +} + +/* for some reason i need to add this or some elements are rendered in OS color rather than 'forced' color */ +div { + color: var(--text-color); + background-color: var(--background-color); } div#root { @@ -27,17 +62,18 @@ kbd { box-shadow: inset 0 -1.5px 0 #aaa; vertical-align: middle; user-select: none; + color: black; } kbd:active { transform: translateY(1px); } input { /* border: solid blue 2px; */ - accent-color: rgba(0,0,255,0.2); + accent-color: var(--light-accent-color); } ::selection { - background-color: rgba(0,0,255,0.2); + background-color: var(--light-accent-color); } label { From 02cbbe601ad966dd842c7d24e3279bf0805849b8 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Thu, 13 Nov 2025 19:50:33 +0100 Subject: [PATCH 15/30] disable forcing light/dark mode (doesn't work properly) --- src/App/App.tsx | 11 +- src/App/BottomPanel/BottomPanel.css | 2 +- src/App/SideBar/SideBar.css | 15 - src/App/TopPanel/TopPanel.tsx | 11 +- src/App/VisualEditor/hooks/useMouse.tsx | 2 - src/Logo/Logo.tsx | 1572 ++++++++++++++++++++++- src/index.css | 10 +- 7 files changed, 1586 insertions(+), 37 deletions(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index aa38f9a..d0ac4d8 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -45,7 +45,8 @@ export function App() { const [editHistory, setEditHistory] = useState(null); const [modal, setModal] = useState(null); - const [lightMode, setLightMode] = usePersistentState("lightMode", "auto"); + // const [lightMode, setLightMode] = usePersistentState("lightMode", "auto"); + const lightMode = "auto"; const {makeCheckPoint, onRedo, onUndo, onRotate} = useEditor(setEditHistory); @@ -140,7 +141,11 @@ export function App() { const plantState = currentBigStep && currentBigStep.state.plant || plant.execution.initial()[1]; - return
      + return
      {/* top-to-bottom: everything -> bottom panel */}
      @@ -156,7 +161,7 @@ export function App() { style={{flex: '0 0 content'}} > {editHistory && }
      {/* Editor */} diff --git a/src/App/BottomPanel/BottomPanel.css b/src/App/BottomPanel/BottomPanel.css index d0922b3..4a93ad9 100644 --- a/src/App/BottomPanel/BottomPanel.css +++ b/src/App/BottomPanel/BottomPanel.css @@ -1,7 +1,7 @@ .errorStatus { /* background-color: rgb(230,0,0); */ background-color: var(--error-color); - color: white; + color: var(--background-color); } .bottom { diff --git a/src/App/SideBar/SideBar.css b/src/App/SideBar/SideBar.css index b2212da..4f52df7 100644 --- a/src/App/SideBar/SideBar.css +++ b/src/App/SideBar/SideBar.css @@ -62,11 +62,8 @@ button.inputEvent:active:not(:disabled) { } .activeState { - /* border: rgb(192, 125, 0); */ - /* background-color:rgb(255, 251, 244); */ border: var(--active-state-border-color) 1px solid; background-color: var(--active-state-bg-color); - /* filter: drop-shadow( 0px 0px 3px rgba(192, 125, 0, 0.856)); */ border-radius: 6px; margin-left: 4px; padding-left: 2px; @@ -75,18 +72,6 @@ button.inputEvent:active:not(:disabled) { color: var(--text-color); } -/* hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 0; - margin-top: -1px; - margin-bottom: -5px; - padding: 0; - z-index: -1; -} */ - ul { list-style-type: circle; margin-block-start: 0; diff --git a/src/App/TopPanel/TopPanel.tsx b/src/App/TopPanel/TopPanel.tsx index eeb0048..7e922c4 100644 --- a/src/App/TopPanel/TopPanel.tsx +++ b/src/App/TopPanel/TopPanel.tsx @@ -37,8 +37,8 @@ export type TopPanelProps = { onInit: () => void, onClear: () => void, onBack: () => void, - lightMode: LightMode, - setLightMode: Dispatch>, + // lightMode: LightMode, + // setLightMode: Dispatch>, insertMode: InsertMode, setInsertMode: Dispatch>, setModal: Dispatch>, @@ -51,7 +51,7 @@ export type TopPanelProps = { const ShortCutShowKeys = ~; -export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, onRedo, onRotate, onInit, onClear, onBack, lightMode, setLightMode, insertMode, setInsertMode, setModal, zoom, setZoom, showKeys, setShowKeys, editHistory}: TopPanelProps) { +export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, onRedo, onRotate, onInit, onClear, onBack, insertMode, setInsertMode, setModal, zoom, setZoom, showKeys, setShowKeys, editHistory}: TopPanelProps) { const [displayTime, setDisplayTime] = useState("0.000"); const [timescale, setTimescale] = usePersistentState("timescale", 1); @@ -152,7 +152,8 @@ export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, on }, [config, time, onInit, onChangePaused, setShowKeys, onSkip, onBack, onClear]); return
      - {/* light / dark mode */} + + {/* light / dark mode
        -
      +
      */} {/* shortcuts / about */}
      diff --git a/src/App/VisualEditor/hooks/useMouse.tsx b/src/App/VisualEditor/hooks/useMouse.tsx index 335a6f0..a49f8db 100644 --- a/src/App/VisualEditor/hooks/useMouse.tsx +++ b/src/App/VisualEditor/hooks/useMouse.tsx @@ -356,8 +356,6 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo } }, [makeCheckPoint, deleteSelection, setState, setDragging]); - console.log(state.selection); - useEffect(() => { // mousemove and mouseup are global event handlers so they keep working when pointer is outside of browser window window.addEventListener("mouseup", onMouseUp); diff --git a/src/Logo/Logo.tsx b/src/Logo/Logo.tsx index 5d064ad..f524103 100644 --- a/src/Logo/Logo.tsx +++ b/src/Logo/Logo.tsx @@ -6,6 +6,1572 @@ export function Logo() { fill: var(--text-color); } `} - - ; -} \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ; +} diff --git a/src/index.css b/src/index.css index 512a0d0..a7da777 100644 --- a/src/index.css +++ b/src/index.css @@ -8,11 +8,11 @@ html, body { :root { color-scheme: light dark; - --background-color: light-dark(white, rgb(26, 26, 26)); + --background-color: light-dark(white, rgb(0, 0, 0)); --text-color: light-dark(black, white); --error-color: light-dark(rgb(163, 0, 0), rgb(255, 82, 82)); --error-bg-color: light-dark(lightpink, rgb(75, 0, 0)); - --error-hover-bg-color: light-dark(rgb(102, 0, 0), rgb(102, 0, 0)); + --error-hover-bg-color: light-dark(rgb(102, 0, 0), rgb(238, 153, 153)); --light-accent-color: light-dark(rgba(0,0,255,0.2), rgba(78, 186, 248, 0.377)); --accent-border-color: light-dark(blue, rgb(64, 185, 255)); --separator-color: light-dark(lightgrey, rgb(44, 44, 44)); @@ -39,12 +39,6 @@ html, body { --output-event-bg-color: light-dark(rgb(230, 249, 255), rgb(28, 83, 104)); } -/* for some reason i need to add this or some elements are rendered in OS color rather than 'forced' color */ -div { - color: var(--text-color); - background-color: var(--background-color); -} - div#root { height: 100%; } From af934c6767b943be92fa03ea37bf3944671a1c54 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Thu, 13 Nov 2025 19:55:52 +0100 Subject: [PATCH 16/30] improve colors --- src/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index a7da777..4ef1abf 100644 --- a/src/index.css +++ b/src/index.css @@ -19,7 +19,7 @@ html, body { --inactive-bg-color: light-dark(#f7f7f7, rgb(29, 29, 29)); --inactive-fg-color: light-dark(grey, rgb(70, 70, 70)); --button-bg-color: light-dark(#fcfcfc, rgb(20, 20, 20)); - --modal-backdrop-color: light-dark(rgba(200,200,200,0.7), rgba(59, 7, 7, 0.849)); + --modal-backdrop-color: light-dark(rgba(200,200,200,0.7), rgba(23, 22, 32, 0.849)); --status-inactive-color: light-dark(grey, grey); --status-ok-color: light-dark(forestgreen, forestgreen); --or-state-bg-color: light-dark(#eee, #1a1a1a); From ee899cea2d91bbe55f3869e8c0ad836a9e6ad6d5 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Thu, 13 Nov 2025 21:01:50 +0100 Subject: [PATCH 17/30] fix selection --- src/App/VisualEditor/hooks/useMouse.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/App/VisualEditor/hooks/useMouse.tsx b/src/App/VisualEditor/hooks/useMouse.tsx index a49f8db..54b198a 100644 --- a/src/App/VisualEditor/hooks/useMouse.tsx +++ b/src/App/VisualEditor/hooks/useMouse.tsx @@ -271,16 +271,16 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo // @ts-ignore setSelection(oldSelection => { - const newSelection = []; + const newSelection = [...oldSelection]; const common = []; for (const shape of shapesInSelection) { const uid = shape.dataset.uid; if (uid) { const parts = shape.dataset.parts?.split(' ') || []; for (const part of parts) { - if (oldSelection.some(({uid: oldUid, part: oldPart}) => + if (newSelection.some(({uid: oldUid, part: oldPart}) => uid === oldUid && part === oldPart)) { - common.push({uid, part}); + // common.push({uid, part}); } else { @@ -289,7 +289,9 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo } } } - return [...oldSelection, ...newSelection]; + // console.log({newSelection, oldSelection, common}); + // return [...oldSelection, ...newSelection]; + return newSelection;xxxxxxxx }) } } From e3b88b7d897233d7ad2ad620109deaaa92e2df45 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Thu, 13 Nov 2025 21:06:19 +0100 Subject: [PATCH 18/30] blue is better for bottom panel in dark mode --- src/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index 4ef1abf..9b7ef7d 100644 --- a/src/index.css +++ b/src/index.css @@ -30,7 +30,7 @@ html, body { --fired-transition-color: light-dark(rgb(160, 0, 168), rgb(160, 0, 168)); --firing-transition-color: light-dark(rgba(255, 128, 9, 1), rgba(255, 128, 9, 1)); --associated-color: light-dark(green, rgb(186, 245, 119)); - --bottom-panel-bg-color: light-dark(rgb(255, 249, 235), rgb(41, 4, 4)); + --bottom-panel-bg-color: light-dark(rgb(255, 249, 235), rgb(24, 40, 70)); --summary-hover-bg-color: light-dark(#eee, #242424); --internal-event-bg-color: light-dark(rgb(255, 218, 252), rgb(99, 27, 94)); --input-event-bg-color: light-dark(rgb(224, 247, 209), rgb(59, 95, 37)); From e29559e46dfbd7c639083b5c01e063b8a0530f94 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Thu, 13 Nov 2025 22:01:02 +0100 Subject: [PATCH 19/30] improve dark mode colors + fix dark logo in chrome --- src/App/App.css | 2 +- src/App/App.tsx | 2 +- src/Logo/Logo.tsx | 15 ++++++++------- src/index.css | 19 +++++++++++++++---- 4 files changed, 25 insertions(+), 13 deletions(-) diff --git a/src/App/App.css b/src/App/App.css index 73965d8..5bc6051 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -47,7 +47,7 @@ details:has(+ details) { } .toolbar input { - height: 20px; + height: 22px; } .toolbar div { vertical-align: bottom; diff --git a/src/App/App.tsx b/src/App/App.tsx index d0ac4d8..bd89a9b 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -174,7 +174,7 @@ export function App() { {/* Right: sidebar */}
      - + + + + + + + @@ -1563,12 +1569,7 @@ export function Logo() { - - - - - - + diff --git a/src/index.css b/src/index.css index 9b7ef7d..14779eb 100644 --- a/src/index.css +++ b/src/index.css @@ -8,17 +8,19 @@ html, body { :root { color-scheme: light dark; - --background-color: light-dark(white, rgb(0, 0, 0)); + --background-color: light-dark(white, rgb(31, 33, 36)); --text-color: light-dark(black, white); --error-color: light-dark(rgb(163, 0, 0), rgb(255, 82, 82)); --error-bg-color: light-dark(lightpink, rgb(75, 0, 0)); --error-hover-bg-color: light-dark(rgb(102, 0, 0), rgb(238, 153, 153)); --light-accent-color: light-dark(rgba(0,0,255,0.2), rgba(78, 186, 248, 0.377)); --accent-border-color: light-dark(blue, rgb(64, 185, 255)); + --accent-opaque-color: rgba(78, 186, 248, 1); --separator-color: light-dark(lightgrey, rgb(44, 44, 44)); --inactive-bg-color: light-dark(#f7f7f7, rgb(29, 29, 29)); --inactive-fg-color: light-dark(grey, rgb(70, 70, 70)); - --button-bg-color: light-dark(#fcfcfc, rgb(20, 20, 20)); + --button-bg-color: light-dark(#fcfcfc, rgb(44, 50, 63)); + --textbox-bg-color: light-dark(white, rgb(36, 41, 40)); --modal-backdrop-color: light-dark(rgba(200,200,200,0.7), rgba(23, 22, 32, 0.849)); --status-inactive-color: light-dark(grey, grey); --status-ok-color: light-dark(forestgreen, forestgreen); @@ -31,14 +33,23 @@ html, body { --firing-transition-color: light-dark(rgba(255, 128, 9, 1), rgba(255, 128, 9, 1)); --associated-color: light-dark(green, rgb(186, 245, 119)); --bottom-panel-bg-color: light-dark(rgb(255, 249, 235), rgb(24, 40, 70)); - --summary-hover-bg-color: light-dark(#eee, #242424); + --summary-hover-bg-color: light-dark(#eee, #313131); --internal-event-bg-color: light-dark(rgb(255, 218, 252), rgb(99, 27, 94)); --input-event-bg-color: light-dark(rgb(224, 247, 209), rgb(59, 95, 37)); --input-event-hover-bg-color: light-dark(rgb(195, 224, 176), rgb(59, 88, 40)); --input-event-active-bg-color: light-dark(rgb(176, 204, 158), rgb(77, 117, 53)); --output-event-bg-color: light-dark(rgb(230, 249, 255), rgb(28, 83, 104)); + + background-color: var(--background-color); + color: var(--text-color); } +input { + background-color: var(--textbox-bg-color); + border: 1px solid var(--separator-color); +} + + div#root { height: 100%; } @@ -63,7 +74,7 @@ kbd:active { transform: translateY(1px); } input { /* border: solid blue 2px; */ - accent-color: var(--light-accent-color); + accent-color: var(--accent-opaque-color); } ::selection { From c825830a143a4c6b77b56189905a973281a16565 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Thu, 13 Nov 2025 22:09:49 +0100 Subject: [PATCH 20/30] better looking checkboxes --- src/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index 14779eb..67e5114 100644 --- a/src/index.css +++ b/src/index.css @@ -15,7 +15,7 @@ html, body { --error-hover-bg-color: light-dark(rgb(102, 0, 0), rgb(238, 153, 153)); --light-accent-color: light-dark(rgba(0,0,255,0.2), rgba(78, 186, 248, 0.377)); --accent-border-color: light-dark(blue, rgb(64, 185, 255)); - --accent-opaque-color: rgba(78, 186, 248, 1); + --accent-opaque-color: light-dark(#ccccff, #305b73); --separator-color: light-dark(lightgrey, rgb(44, 44, 44)); --inactive-bg-color: light-dark(#f7f7f7, rgb(29, 29, 29)); --inactive-fg-color: light-dark(grey, rgb(70, 70, 70)); From dc948629a70963c30ba3fc6a1e58307a6bbfe746 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Thu, 13 Nov 2025 22:27:13 +0100 Subject: [PATCH 21/30] fix history color in dark mode + flip colors of and/or --- src/App/VisualEditor/HistorySVG.tsx | 7 +++++-- src/App/VisualEditor/hooks/useMouse.tsx | 3 ++- src/index.css | 4 ++-- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/App/VisualEditor/HistorySVG.tsx b/src/App/VisualEditor/HistorySVG.tsx index f0fccb4..565e9ac 100644 --- a/src/App/VisualEditor/HistorySVG.tsx +++ b/src/App/VisualEditor/HistorySVG.tsx @@ -9,8 +9,10 @@ export const HistorySVG = memo(function HistorySVG(props: {uid: string, topLeft: cx={props.topLeft.x+HISTORY_RADIUS} cy={props.topLeft.y+HISTORY_RADIUS} r={HISTORY_RADIUS} - fill="white" - stroke="black" + style={{ + fill: 'var(--and-state-bg-color)', + stroke: 'var(--rountangle-stroke-color)' + }} strokeWidth={2} data-uid={props.uid} data-parts="history" @@ -20,6 +22,7 @@ export const HistorySVG = memo(function HistorySVG(props: {uid: string, topLeft: y={props.topLeft.y+HISTORY_RADIUS+5} textAnchor="middle" fontWeight={500} + style={{fill: 'var(--rountangle-stroke-color)'}} >{text} void, insertMode: InsertMode, zoo } else { + // @ts-ignore newSelection.push({uid, part}); } } @@ -291,7 +292,7 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo } // console.log({newSelection, oldSelection, common}); // return [...oldSelection, ...newSelection]; - return newSelection;xxxxxxxx + return newSelection; }) } } diff --git a/src/index.css b/src/index.css index 67e5114..ac053c8 100644 --- a/src/index.css +++ b/src/index.css @@ -24,8 +24,8 @@ html, body { --modal-backdrop-color: light-dark(rgba(200,200,200,0.7), rgba(23, 22, 32, 0.849)); --status-inactive-color: light-dark(grey, grey); --status-ok-color: light-dark(forestgreen, forestgreen); - --or-state-bg-color: light-dark(#eee, #1a1a1a); - --and-state-bg-color: light-dark(white, rgb(0, 0, 0)); + --or-state-bg-color: light-dark(#eee, #000000); + --and-state-bg-color: light-dark(white, rgb(46, 46, 46)); --rountangle-stroke-color: light-dark(black, #d4d4d4); --active-state-bg-color: light-dark(rgb(255, 240, 214), rgb(53, 37, 18)); --active-state-border-color: light-dark(rgb(205, 133, 0), rgb(235, 124, 21)); From 74361eb162280d3b05cf1ca3007e9495191bed76 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Thu, 13 Nov 2025 22:47:10 +0100 Subject: [PATCH 22/30] accidentally committed debug endpoint for property checking --- src/App/SideBar/check_property.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App/SideBar/check_property.ts b/src/App/SideBar/check_property.ts index f0c779e..24a41cb 100644 --- a/src/App/SideBar/check_property.ts +++ b/src/App/SideBar/check_property.ts @@ -2,8 +2,8 @@ import { RT_Statechart } from "@/statecharts/runtime_types"; import { Plant } from "../Plant/Plant"; import { TraceItem } from "../hooks/useSimulator"; -const endpoint = "http://localhost:15478/check_property"; -// const endpoint = "https://deemz.org/apis/mtl-aas/check_property"; +// const endpoint = "http://localhost:15478/check_property"; +const endpoint = "https://deemz.org/apis/mtl-aas/check_property"; export type PropertyTrace = { timestamp: number, From bdc2a66b1cb9e21f912fa167bef08de3b525221d Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Thu, 13 Nov 2025 22:49:16 +0100 Subject: [PATCH 23/30] remove debug output --- src/App/SideBar/check_property.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/App/SideBar/check_property.ts b/src/App/SideBar/check_property.ts index 24a41cb..54d3a5e 100644 --- a/src/App/SideBar/check_property.ts +++ b/src/App/SideBar/check_property.ts @@ -52,8 +52,6 @@ export async function checkProperty(plant: Plant, property: } } - console.log({cleanPlantStates, traces}); - try { const response = await fetch(endpoint, { method: "POST", From 632cf9b542e3dfcf256eaad8ea3129d8a058e8a9 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Thu, 13 Nov 2025 23:56:52 +0100 Subject: [PATCH 24/30] progress bar shows how long until next timer elapse --- src/App/App.tsx | 1 - src/App/TopPanel/SpeedControl.tsx | 4 +++- src/App/TopPanel/TopPanel.tsx | 32 ++++++++++++++++++++++++------- 3 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index bd89a9b..9faad11 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -17,7 +17,6 @@ import { useUrlHashState } from "../hooks/useUrlHashState"; import { plants } from "./plants"; import { emptyState } from "@/statecharts/concrete_syntax"; import { ModalOverlay } from "./Modals/ModalOverlay"; -import { usePersistentState } from "@/hooks/usePersistentState"; export type EditHistory = { current: VisualEditorState, diff --git a/src/App/TopPanel/SpeedControl.tsx b/src/App/TopPanel/SpeedControl.tsx index 9e936af..0343d1a 100644 --- a/src/App/TopPanel/SpeedControl.tsx +++ b/src/App/TopPanel/SpeedControl.tsx @@ -2,6 +2,8 @@ import { Dispatch, memo, SetStateAction, useCallback, useEffect } from "react"; import { KeyInfoHidden, KeyInfoVisible } from "./KeyInfo"; import { setRealtime, TimeMode } from "@/statecharts/time"; +import SpeedIcon from '@mui/icons-material/Speed'; + export const SpeedControl = memo(function SpeedControl({showKeys, timescale, setTimescale, setTime}: {showKeys: boolean, timescale: number, setTimescale: Dispatch>, setTime: Dispatch>}) { const onTimeScaleChange = useCallback((newValue: string, wallclktime: number) => { @@ -51,7 +53,7 @@ export const SpeedControl = memo(function SpeedControl({showKeys, timescale, set const KeyInfo = showKeys ? KeyInfoVisible : KeyInfoHidden; return <> -   +   S}> diff --git a/src/App/TopPanel/TopPanel.tsx b/src/App/TopPanel/TopPanel.tsx index 7e922c4..1974f83 100644 --- a/src/App/TopPanel/TopPanel.tsx +++ b/src/App/TopPanel/TopPanel.tsx @@ -1,4 +1,4 @@ -import { Dispatch, memo, ReactElement, SetStateAction, useCallback, useEffect, useState } from "react"; +import { Dispatch, memo, ReactElement, SetStateAction, useCallback, useEffect, useMemo, useState } from "react"; import { TimerElapseEvent, Timers } from "../../statecharts/runtime_types"; import { getSimTime, setPaused, setRealtime, TimeMode } from "../../statecharts/time"; import { InsertMode } from "./InsertModes"; @@ -13,6 +13,9 @@ import DarkModeIcon from '@mui/icons-material/DarkMode'; import LightModeIcon from '@mui/icons-material/LightMode'; import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto'; +import SpeedIcon from '@mui/icons-material/Speed'; +import AccessTimeIcon from '@mui/icons-material/AccessTime'; + import AccessAlarmIcon from '@mui/icons-material/AccessAlarm'; import CachedIcon from '@mui/icons-material/Cached'; import InfoOutlineIcon from '@mui/icons-material/InfoOutline'; @@ -52,7 +55,7 @@ export type TopPanelProps = { const ShortCutShowKeys = ~; export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, onRedo, onRotate, onInit, onClear, onBack, insertMode, setInsertMode, setModal, zoom, setZoom, showKeys, setShowKeys, editHistory}: TopPanelProps) { - const [displayTime, setDisplayTime] = useState("0.000"); + const [displayTime, setDisplayTime] = useState(0); const [timescale, setTimescale] = usePersistentState("timescale", 1); const config = trace && trace.trace[trace.idx]; @@ -62,9 +65,16 @@ export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, on const updateDisplayedTime = useCallback(() => { const now = Math.round(performance.now()); const timeMs = getSimTime(time, now); - setDisplayTime(formatTime(timeMs)); + setDisplayTime((timeMs)); }, [time, setDisplayTime]); + const formattedDisplayTime = useMemo(() => formatTime(displayTime), [displayTime]); + + // const lastSimTime = useMemo(() => time.kind === "realtime" ? time.since.simtime : time.simtime, [time]); + + const lastSimTime = config?.simtime || 0; + + useEffect(() => { // This has no effect on statechart execution. In between events, the statechart is doing nothing. However, by updating the displayed time, we give the illusion of continuous progress. const interval = setInterval(() => { @@ -105,6 +115,9 @@ export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, on } }, [nextTimedTransition, setTime]); + + console.log({lastSimTime, displayTime, nxt: nextTimedTransition?.[0]}); + useEffect(() => { const onKeyDown = (e: KeyboardEvent) => { // don't capture keyboard events when focused on an input element: @@ -228,15 +241,20 @@ export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, on {/* time, next */}
      -   - +   + + +
      +  
      -   +   Tab}> - +  
      From 8fa430846ba1abc3e06f0321c005c2eb3814b97b Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Fri, 14 Nov 2025 09:27:19 +0100 Subject: [PATCH 25/30] edit css, make microwave background transparent --- src/App/BottomPanel/BottomPanel.tsx | 2 +- src/{ => App}/Logo/Logo.tsx | 0 src/App/Modals/About.tsx | 2 +- src/App/Modals/TextDialog.tsx | 10 ++++++---- src/App/Plant/Microwave/Microwave.tsx | 2 +- .../Plant/Microwave/originals/microwave.xcf | Bin 0 -> 802965 bytes .../transparent_small_closed_off.png | Bin 0 -> 76659 bytes .../originals/transparent_small_closed_on.png | Bin 0 -> 88287 bytes .../transparent_small_opened_off.png | Bin 0 -> 81557 bytes .../originals/transparent_small_opened_on.png | Bin 0 -> 70135 bytes src/App/Plant/Microwave/small_closed_off.webp | Bin 17958 -> 16836 bytes src/App/Plant/Microwave/small_closed_on.webp | Bin 10498 -> 10476 bytes src/App/Plant/Microwave/small_opened_off.webp | Bin 13076 -> 15386 bytes src/App/Plant/Microwave/small_opened_on.webp | Bin 12594 -> 15176 bytes src/index.css | 2 +- 15 files changed, 10 insertions(+), 8 deletions(-) rename src/{ => App}/Logo/Logo.tsx (100%) create mode 100644 src/App/Plant/Microwave/originals/microwave.xcf create mode 100644 src/App/Plant/Microwave/originals/transparent_small_closed_off.png create mode 100644 src/App/Plant/Microwave/originals/transparent_small_closed_on.png create mode 100644 src/App/Plant/Microwave/originals/transparent_small_opened_off.png create mode 100644 src/App/Plant/Microwave/originals/transparent_small_opened_on.png diff --git a/src/App/BottomPanel/BottomPanel.tsx b/src/App/BottomPanel/BottomPanel.tsx index 51dcd81..ad1cd93 100644 --- a/src/App/BottomPanel/BottomPanel.tsx +++ b/src/App/BottomPanel/BottomPanel.tsx @@ -4,7 +4,7 @@ import { TraceableError } from "../../statecharts/parser"; import "./BottomPanel.css"; import { PersistentDetailsLocalStorage } from "../PersistentDetails"; -import { Logo } from "@/Logo/Logo"; +import { Logo } from "@/App/Logo/Logo"; export function BottomPanel(props: {errors: TraceableError[]}) { const [greeting, setGreeting] = useState( diff --git a/src/Logo/Logo.tsx b/src/App/Logo/Logo.tsx similarity index 100% rename from src/Logo/Logo.tsx rename to src/App/Logo/Logo.tsx diff --git a/src/App/Modals/About.tsx b/src/App/Modals/About.tsx index b270b8e..cd0605b 100644 --- a/src/App/Modals/About.tsx +++ b/src/App/Modals/About.tsx @@ -1,4 +1,4 @@ -import { Logo } from "@/Logo/Logo"; +import { Logo } from "@/App/Logo/Logo"; import { Dispatch, ReactElement, SetStateAction } from "react"; export function About(props: {setModal: Dispatch>}) { diff --git a/src/App/Modals/TextDialog.tsx b/src/App/Modals/TextDialog.tsx index a478877..6ab731b 100644 --- a/src/App/Modals/TextDialog.tsx +++ b/src/App/Modals/TextDialog.tsx @@ -29,12 +29,14 @@ export function TextDialog(props: {setModal: Dispatch - Text label:
      + {/* Text label:
      */}