1.2 KiB
1.2 KiB
Vue Flow is the editor substrate; the domain Model is the source of truth
The editor is built on Vue Flow (@vue-flow/core) for pan/zoom, node
dragging, handles, edge-drawing, and selection, with Stocks/Flows/Converters/
Clouds as custom Vue node components. We rejected hand-rolling an SVG editor (too
slow to the friction goals F1–F3) and heavier kits (AntV X6, mxGraph — not
Vue-3-native).
The constraint that makes this safe: the domain Model is the single source of
truth; the Vue Flow graph is a derived projection of it, never the reverse. All
writes go through store actions that mutate the Model; the Vue Flow view is
re-derived. The future simulator reads the Model and has no knowledge of Vue
Flow.
Consequences
- A projection layer (Model → Vue Flow nodes/edges, and Vue Flow events → store actions) must be built and kept thin. This is the price of the dependency.
- Swapping the rendering substrate later means rewriting only the projection + node/edge components, not the domain model or the simulator.
- A reader wondering "why is there a sync/projection layer instead of editing Vue Flow state directly?" should look here: it protects the simulate-later constraint.