crosssection

Use at: https://xy-kasumi.github.io/crosssection

In-browser calculator for 2D cross-section properties, including:

• A: area
• Iₓ, Iᵧ (second moments of area)
• J (torsional constant).

Static, local-only SPA; the heavy lifting (FEM) is sectionproperties (Python) running in Pyodide.

Three self-contained modules. Each owns its own package.json and tests; per-module READMEs cover internals. See editor-model.md to how geom & web work together as an editor.

• solver/ — Pyodide+sectionproperties FEM kernel. Includes the cytriangle wheel-build recipe.
• geom/ — Pure, immutable geometry kernel for the editor. apply(shape, op) is the only mutation surface.
• web/ — Browser UI, Vite-bundled. Composes solver + geom.

flowchart LR
  web --> geom
  web --> solver
  geom -. type-only: SolverShape .-> solver

• Compute runs in Pyodide using sectionproperties plus cytriangle. cytriangle has no Pyodide wheel on PyPI; we build one and commit it under solver/wheels/. See solver/pyodide-build/cytriangle/README.md.
• Tests run under Pyodide-on-Node, not in a browser — same Python, same wheels, same numerics. Every expected value cites an external source; self-computed regression baselines are not allowed.
• The web editor talks to geom/ through apply(shape, op) → ok | warn | err | invalid; the editor never mutates shape state directly. The split exists so geometry decisions are unit-testable without a canvas — see editor-model.md.

(cd solver && npm install)
(cd geom && npm install)
./test.sh                            # full battery, 5 cases × 3 properties = 15 PASS, ~20s wall
(cd solver && npm run typecheck)
(cd geom && npm run typecheck)

./test.sh is the canonical correctness gate; the browser is a presentation layer over the same code.

cd web
npm install
npm run dev         # vite dev server at http://localhost:5173/

On first load, a muted carousel of demo cross-sections plays in the canvas while Pyodide boots. Click Rod / Rectangle / Extrusion in the left pane to enter the editor; a small W/H/S/D form appears over the canvas — type values, Enter confirms. Use Paint Rect / Erase Rect / Add Hole in the toolbar to compose; Space toggles snap-to-grid. Right-click a vertex to delete it; click an empty edge handle to insert one. The status strip below the canvas surfaces tool hints, amber warnings, and red errors. The three readouts update after every edit; "computing…" fade indicates a solve in flight.

Author the shape in the editor, run __editor.dumpShape() in devtools (logs JSON, best-effort clipboard), then paste into geom/presets.ts or web/src/canvas/zero-state.ts.

cd web
npm run build       # static bundle in web/dist/
npm run preview     # serve dist/ for sanity check

web/dist/ is plain static files — drop on any static host (Netlify/Pages/S3). The first page load fetches Pyodide's runtime (~5 MB) from the jsdelivr CDN.

Only needed when bumping cytriangle or Pyodide upstream:

solver/pyodide-build/setup-toolchain.sh   # one-time, ~2 GB for emsdk + xbuildenv
solver/pyodide-build/cytriangle/build.sh  # rebuild; stages into solver/wheels/

See solver/pyodide-build/cytriangle/README.md for the patches applied and what to do when upgrading.