diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md new file mode 100644 index 0000000..9839f83 --- /dev/null +++ b/ARCHITECTURE.md @@ -0,0 +1,318 @@ +# Architecture + +## Stack + +Pure vanilla HTML/CSS/JS — no frameworks, no build tools. MathJax v3 for LaTeX rendering is the only runtime dependency (loaded before app scripts). Eight JS modules loaded in dependency order at the end of ``. + +## Load Order + +``` +index.html + └─ style.css + └─ lib/mathjax/tex-mml-chtml.js → MathJax v3 (LaTeX→HTML rendering) + └─ dom.js → $, $id, svgNamespace, STORAGE_KEY + └─ helpers.js → splitValueAndUnit, rebuildSelect, refresh* functions + └─ error.js → showError, closeError + └─ draw.js → routeBetween, drawpath, shadow link system + └─ wcblock.js → WCBlock base (drag/drop, link system, code traversal) + └─ blocks-algo.js → Algorithm tab blocks (WCStart, WCEnd, WCOutput, WCDecision, + │ WCAssign, WCExpression, WCVarRef) + └─ blocks-data.js → Data & Measurement tab blocks (WCQuantity, WCUnit, WCBoolean, + │ WCScalar, WCString, WCArray) + └─ blocks-proc.js → Procedure blocks (WCProcedure, WCProcCall) + └─ wcprogram.js → WCProgram + block registry + registration calls + └─ persist.js → saveWorkspace, loadWorkspace, newWorkspace + └─ app.js → entry point, setupUI, main() +``` + +## File Roles + +### `dom.js` — Global constants & DOM shortcuts + +Provides app-wide constants that every module depends on: + +- `$` — `document.querySelector.bind(document)` — concise single-element selector +- `$id` — `document.getElementById.bind(document)` — concise ID lookup +- `svgNamespace` — `"http://www.w3.org/2000/svg"` — for SVG element creation +- `STORAGE_KEY` — `"workspace"` — localStorage key for persistence + +### `helpers.js` — Utility functions & dropdown refresh + +Pure helper functions (no module dependencies beyond DOM): + +- `splitValueAndUnit(str, defaultNum)` — parses `"5 km"` → `{numVal: 5, unitSuffix: "km"}` +- `rebuildSelect(sel, placeholder, values, current)` — replaces `