Circuit layout editor build 77 · 2026-09-09 UTC

Builds node/wire data in the same shape as the app's CIRCUITS entries.

Mode

Drag a node to move it. Click one to edit its fields below.

Snap increment Alignment snap (single-node drag) Port alignment Component centers Canvas center

When dragging one node, its ports/center pull into line with anything else on the sheet within a few pixels — a pink guide line shows what it snapped to. Grid snap still applies if nothing else is nearby. Off by default for multi-select drags, to keep group moves predictable.

Dot placement Snap to nearby wire

While placing a dot, the preview rides along whichever wire is closest to the cursor, snapped exactly onto it. Turn this off to drop a dot in open space near a wire without it pulling onto the line \u2014 useful in a crowded area. Port alignment above still shows its pink guide either way, whether the dot is riding a wire or free.

Selected node

ref (symbol name)

w (px)

port pinned here

cell x

cell y

rotation

Matches node.rot in app.js exactly — ports rotate with the symbol, and the artwork rotates in place around the assembled part's own centre, the same way the real renderer does it (CSS rotate on an unrotated image, not a re-flowed one).

Flip horizontal Flip vertical

Matches node.flipH/flipV in app.js — a genuinely different move from rotation, not a substitute for it: it mirrors a single axis only (e.g. swap which side a cylinder's rod exits from, keeping the same orientation otherwise), something no combination of 0°/90°/180°/-90° can do. Flip is applied before rotation, so the two combine predictably together.

—

h (px, manual)

anchor x (0–1)

anchor y (0–1)

Anchor is where inside the box the pinned port sits — 0.5/0.5 is dead centre, 0.5/1 is bottom-middle, etc. Only used when the ref/port isn't in the known-parts library.

Wire in progress

Not drawing. Switch to "Draw wire" and click a start point.

Undo / Redo

Nothing to undo yet.

Keyboard: Ctrl/Cmd+Z to undo, Ctrl/Cmd+Y (or Ctrl/Cmd+Shift+Z) to redo, Delete/Backspace to remove whatever's currently selected, Escape to cancel a wire in progress or clear selection, arrow keys to nudge a selected node one grid step (Shift+arrow for a bigger step). All of these are ignored while typing in a text field.

Import

Paste a previously exported block (or one you're editing by hand) to pick up right where you left off instead of rebuilding from scratch.

Test in the real app

Adds this layout to app.js's own CIRCUITS list at load, so it renders through the real engine — real geometry, real wire bending, real hit areas — rather than this tool's approximation. Requires the small draft-circuit hook added to app.js.

Open index.html, open its browser console (F12), paste this in, press Enter. The circuit appears in Level 4 → Circuits as "Draft (from layout editor)". To remove it again: localStorage.removeItem('draftCircuit'); location.reload();

Sheet

Fix existing wire routing

One-time repair for wires drawn before this fix, when the clean port-approach routing shown in the preview was never actually being saved — so what you saw here and what the real app rendered could genuinely disagree. Re-bakes routing into every wire's current via points, based on where things are right now — including routing a plain (no-via) wire around its own component's box automatically if it's currently cutting straight through it, the same check new wires get as they're drawn. Safe to run on a whole circuit even if some wires are already correctly baked — it strips any existing approach stub first, so it won't stack a second one on top and produce a zigzag.

Output

Everything in one place now — grid, nodes, wires, dots, views and states together, ready to paste as the body of one CIRCUITS.push({ ... }) call.

Save as its own circuit file

Wraps the same data as a ready-to-use file — the download itself gets a date/time stamp added to its name so repeated exports never collide or overwrite each other, but the id inside stays exactly what you type, since that's what other code refers to it by. Add one more <script src="circuits/your-file.js"></script> line to index.html, after app.js, and it pushes itself onto the real CIRCUITS list at load. No build step, works the same way app.js itself loads.

level

name

Circuit layout editor build 77 · 2026-09-09 UTC

Mode

Selected node

Selected wire

Selection

Wire in progress

Undo / Redo

Import

Test in the real app

Sheet

Fix existing wire routing

Output

Save as its own circuit file

States

Editing:

Valve positions in this state

Wires