Skip to content

Simulation, new-from-scratch diagrams, and state-machine authoring#3

Open
dropdevrahul wants to merge 6 commits into
editing-flow-upgradefrom
sim-view-overhaul
Open

Simulation, new-from-scratch diagrams, and state-machine authoring#3
dropdevrahul wants to merge 6 commits into
editing-flow-upgradefrom
sim-view-overhaul

Conversation

@dropdevrahul

Copy link
Copy Markdown
Owner

Stacks on #1 (editing-flow-upgrade). Focuses on the view/simulation flow and state-machine authoring.

New-from-scratch diagrams (drop hardcoded list)

  • localStorage-backed user diagrams (storage.ts): Save / Delete / Import / Export JSON
  • + New blank diagram; templates kept as read-only starters
  • Picker groups Templates + My diagrams

Multi-entity simulation (both graph types)

  • sim.ts: concurrent entities (tokens), each with own vars over global vars
  • flowchart branch choices()/fireTo; state-machine eventsFor()/fire; stepAll
  • SimPanel: entity list, per-entity + global vars, numbered events/branches, per-entity history
  • canvas renders a token per entity; keyboard (1-9 fire, Space step-all, S step, N spawn, ↑↓ switch, R reset) and mouse (click next-node to advance, click token to select)

State-machine authoring (the moat)

  • Text DSL (dsl.ts, "text" tab): A -> B : EVENT [guard] / action, [*] -> S, S -> [*], var x = 0; round-trips with the canvas
  • Diagram Variables editor: add N properties that seed the simulation
  • Right-click → Mark initial / final / normal; UML role markers on canvas
  • Connecting two states auto-opens the inline event editor
  • Bidirectional A<->B edges bow apart for readability

Verification

typecheck clean; dsl + sim + editor self-tests pass; Playwright smokes for new/save, multi-entity sim, mouse-advance, DSL authoring, role menu, bidirectional edges, connect-auto-edit — no console errors.

Diagram management (drop hardcoded list):
- localStorage-backed user diagrams (storage.ts): save / delete / rename
- + New blank diagram; Import/Export JSON; templates kept as starters
- TopBar picker groups Templates + My diagrams; ToolPalette File section

Simulation engine (sim.ts) — multiple concurrent entities:
- entities/tokens with per-entity variables; spawn/remove/select
- works for flowchart (branch choices) and state machine (events)
- enabledFor/eventsFor/choices/fireEntity/fireTo/stepEntity/stepAll
- single-entity API kept as active-entity wrappers; self-tests extended

Simulation UX:
- SimPanel: entity list, per-entity + global vars, numbered events/branches,
  Step / Step all / Reset, per-entity history
- canvas renders a token per entity (active brighter), highlights all occupied
- keyboard in simulate mode: 1-9 fire event/branch, Space step all, S step,
  N spawn, up/down switch token, R reset

Fixes:
- applySpec backfills node sizes so partial specs never yield NaN geometry
- Fit/resetView already state-aware; loadDiagramState plays in-memory specs
- drop non-existent 'checkout' template
- Click an enabled target node to move the active entity there (fires the
  matching event or flowchart edge); click another token to make it active
- Pointer cursor on hover over enabled next-nodes for discoverability
Edit-mode panel section to add/edit/remove diagram-level variables. These
seed the simulation and are read/written by edge guards and actions. Values
are coerced to number/boolean/string.
A 'text' tab with a mermaid-flavoured DSL — type transitions instead of
clicking each edge:
  [*] -> Locked
  Locked -> Unlocked : COIN [coins >= 0] / coins += 1
  Unlocked -> [*]
  var coins = 0
parseDSL builds nodes/edges/roles/variables (type=statemachine); toDSL seeds
the editor from the canvas for round-tripping. Apply (or Ctrl+Enter) lays it
out and loads it. dsl.ts has an import-time round-trip self-test.
- Right-click a state → Mark as initial / final / normal (state machines)
- Render UML-style role markers: initial = entry dot + arrow, final = double ring
- Stop overlaying stale WASM transition pills in edit/simulate (view-mode only)
…onal edges

- Connecting two states now opens the inline event editor immediately
  (deferred a tick so the fresh input isn't blurred by the click)
- A<->B edges bow to opposite sides so both lines and labels stay readable
  (curved rendering when a reverse edge exists)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant