diff --git a/.claude/skills/ui-chrome/SKILL.md b/.claude/skills/ui-chrome/SKILL.md
index 20de754..fbc5ceb 100644
--- a/.claude/skills/ui-chrome/SKILL.md
+++ b/.claude/skills/ui-chrome/SKILL.md
@@ -36,6 +36,17 @@ Two things there are easy to get wrong. **`hidden` is what hides a panel** — t
The face is `--sans`. These are language — "Cancel", "Export", "Download" — and `--mono` is for identifiers and instrumentation, which is the rule the StateMate console already followed and the reason a button there and a button in a dialog did not read as the same control.
+**The state and transition editors are one vocabulary**, declared once in `css/modals.css` under "The state and transition editors", because they edit the two halves of one diagram. They are named alike everywhere a reader meets them — **Edit State** and **Edit Transition**, as dialog titles, as the first item of each context menu, and as the δ/Q list buttons. Points worth keeping:
+
+- **`.edit-body` spaces by `gap`, not by row margins.** `.modal-row:last-of-type` zeroes the margin of the last row in *each* wrapper, and here every machine-specific section is a wrapper: Move used to sit flush against To. Rows inside `.edit-body` have no margin at all.
+- **The edge is one row**, From → To in `.trans-route`, at the top. They used to sit at opposite ends of the dialog with every field between them.
+- **A choice you can see is a `.seg`**, not a menu: a direction strip (`role="radio"`, roving tabindex, arrow keys) or the state's roles (real checkboxes inside their labels, `.seg-check`). The native `select`/`checkbox` stays the field `getTransitionFormValues`/`confirmState` read — the strip only sets it — so tests that write `m-dir.value` still mean what they did.
+- **A rule with one row per part is an `.edit-grid`**: a multi-tape rule is a row per tape (read, write, move — the canvas label's order), a Mealy state's outgoing outputs a row per edge. Three stacked rows per tape made a four-tape rule twelve rows tall. Symbol menus there are bare; `.edit-legend` says what the reserved symbols mean once, beneath.
+- **A reserved symbol says what it means in a menu** (`Σ — any symbol`, `⊔ — blank cell`; `symbolMeaning()`). The value stays the bare symbol.
+- **A section heading names what follows it**, so a row that is not part of the store above gets one of its own: Output after a Stack or Head section, and a two-way head's Move sits under **Head**, not Tape.
+- **A select is given its value with `ensureSelectValue`**, never a bare `.value =` after building options, and the current value is always among the options. A value missing from the menu made the select fall back to its first option, and an untouched Save rewrote the rule (Moore and Mealy outputs did exactly that).
+- **The preview is drawn by the canvas** — see [js/edit-preview.js](../../../js/edit-preview.js) and *A label line is not a rule* in CLAUDE.md.
+
### The sidebars
**The two panels are one component twice**, and everything that says so is in one place each. [js/panel-state.js](js/panel-state.js) is the import-free registry of tabs, sides and selection; `syncPanelTabs` / `activatePanelTab` / `showPanelTab` / `revealPanel` / `togglePanelPin` in [js/ui.js](js/ui.js) each take a side or read one, rather than existing twice; and [css/panels.css](css/panels.css) holds both panels plus the chrome they share (`.panel-header`, `.panel-tabs`, `.panel-tab`, `.pin-btn`, `.panel-resizer`, `.mobile-panel-close`).
diff --git a/CLAUDE.md b/CLAUDE.md
index db36415..c3a9694 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -195,6 +195,10 @@ Two rules follow, and breaking either is silent:
Node internals are reached through `node.__parts` (`circle`, `label`, `ring`, `sub`; `pathEl`, `hitEl`, `textEl`, `handle`) rather than `querySelector`. `sub` is the second line under a state's name, shared by the Moore output and the parity priority — they never coexist. Edge labels live in `#trans-lbl-g`, not inside the edge group, so every label paints above every edge — deleting an edge has to detach both.
+**A label line is not a rule.** `edgeLabelLines(ts)` in [js/render.js](js/render.js) decides what an edge's label draws, and it is a per-*edge* decision made at any machine size — crowding is a property of an edge, which the large-machine profile (a per-machine performance line, `states > 200 || transitions > 700`) never sees: four states over a 36-symbol alphabet is 144 rules and drew every edge as a tower of single characters. Rules whose label differs only in the symbol read share a row (`b, f, j → q3`; braced, `{a, b}, A → AA`, when the rest opens with a comma; never on a multi-tape rule, which reads a tuple), a long list wraps evenly, and past `LABEL_MAX_LINES` the label ends in `+k more`. Each line carries the `ids` it stands for and the edge node keeps them as `__lines`. **Everything that reads a label goes through it** — the canvas's two drawings, `edgeLabelSizeFor` (the layout must place the box that is drawn), the dialogs' preview, and the label editor: a double-click on a one-rule line edits in place, on a merged line or `+k more` opens the dialog with exactly those rules, and `edgeLabelLineOf` is how the strip finds the line it sits over. A new reader of label rows must not assume row *i* is `ts[i]`.
+
+**The state and transition dialogs draw what they will make with the canvas's own code**, not a likeness of it: [js/edit-preview.js](js/edit-preview.js) builds from `edgeGeometryFor`/`selfLoopPath`/`labelRestPoint` in geometry.js, the label writers and `splitStateLabel` here, and the canvas classes in css/canvas.css, so the theme, label style, wrapping, bends and badges follow the diagram. It lays the part being edited out to fit (From left, To right) and never touches `App.domCache`. `labelRestPoint` is `placeLabel`'s first candidate, shared rather than copied. [tests/edit-dialogs.test.js](tests/edit-dialogs.test.js) saves every rule and state of every example through the dialogs unchanged and requires them back identical.
+
**A double-click on a state, a block or an edge is not a native `dblclick`.** A press on any of them can end in `wrap.setPointerCapture`, which retargets the second click and the `dblclick` to `#canvas-wrap`, so a `dblclick` listener on the node never runs in a browser — it runs only in the DOM stub, which calls listeners directly. Each node counts its own two presses on `pointerdown` instead (`DOUBLE_PRESS_MS`). Labels are hit-testable with the Select tool only (`css/canvas.css`) and carry their edge's listeners: one press selects the edge, two open [js/edge-label-editor.js](js/edge-label-editor.js) on the row hit — a strip of fields from the machine's `transitionFields` (a multi-tape machine gets a read, write and move per tape, as ids like `tapeSyms.0`), saved through `saveTransition()`, the function the dialog's Save also uses. The strip is HTML placed from `edgeLabelAnchor()` and the camera, so it also opens from the edge line where the label is not drawn (level of detail, the large-machine profile), and `applyCamera` calls `followLabelEditor()` so it follows a pan or zoom.
`updateFastDOM()` is the drag path: geometry only, every frame, sharing the layout pass and `__parts` with the renderer. It walks **`App.domCache.states`, not `App.states`** — the same list on a small machine, and on a windowed one the difference between fifty writes and a thousand map misses to find them.
@@ -313,7 +317,7 @@ Stated once, at the top of [css/views.css](css/views.css), because it was doing
Three broke the rule and are solid now. **`.tv-cell.is-head.loop`** was the worst of them: a proven loop is a *decision* — the machine never halts, so the input is not accepted, which is strictly more than the step budget can tell you — and drawing the app's firmest verdict as an absence put it in the same visual bracket as an unwritten tape cell. It is `border-style: double` instead, which distinguishes it from an ordinary reject without borrowing the dash. **`.lang-sym.dead`** is a real fact about a real machine: uninteresting, not missing, and quiet is what colour and opacity are for. **`.wiz-chips .chip.is-locked`** is a constraint the machine has, so it takes the disabled idiom the app now owns.
-Everything still dashed is genuinely one of the four: `.tv-cell.is-blank`, `.tv-cell.is-ghost`, `.example-chip.is-pending`, `.example-card-add`, `.gram-stub`, `.canvas-info-btn.is-invite`, `.wiz-example`, `.pn-body` — a port, derived from the wiring on every rebuild — StateMate's `.draft-layer`, a machine still being written, and the Behaviour card's `.bh-cell.is-blank` and `.bh-cell.is-any` — a cell backward reasoning's witness never read, where any symbol will do.
+Everything still dashed is genuinely one of the four: `.tv-cell.is-blank`, `.tv-cell.is-ghost`, `.example-chip.is-pending`, `.example-card-add`, `.gram-stub`, `.canvas-info-btn.is-invite`, `.wiz-example`, `.pn-body` — a port, derived from the wiring on every rebuild — StateMate's `.draft-layer`, a machine still being written, the Behaviour card's `.bh-cell.is-blank` and `.bh-cell.is-any` — a cell backward reasoning's witness never read, where any symbol will do — the state and transition dialogs' `.edit-preview`, a drawing of what they will make, and `.edge-pill-more`, a count of rules a dense label does not draw.
### Themes
diff --git a/css/canvas.css b/css/canvas.css
index 31796b3..d131b82 100644
--- a/css/canvas.css
+++ b/css/canvas.css
@@ -440,6 +440,24 @@
stroke-linejoin: round;
}
+/* The `+k more` that ends a dense edge's label (render.js, edgeLabelLines):
+ a count of rules not drawn, so it is set apart from the rules that are. */
+.tlbl tspan.tlbl-more {
+ fill: var(--text3);
+ font-style: italic;
+}
+
+.edge-pill-more rect {
+ fill: transparent;
+ stroke: color-mix(in srgb, var(--text3) 45%, transparent);
+ stroke-dasharray: 3 2;
+}
+
+.edge-pill-more text {
+ fill: var(--text3);
+ font-style: italic;
+}
+
.edge-pill-label {
overflow: visible;
paint-order: normal;
diff --git a/css/modals.css b/css/modals.css
index 7f606a7..ef21f56 100644
--- a/css/modals.css
+++ b/css/modals.css
@@ -2364,29 +2364,11 @@ button.sm-stat:disabled {
margin-top: -8px;
}
+/* The Mealy table in the state dialog (see .edit-grid). A state with many
+ outgoing edges scrolls here rather than pushing the preview off the card. */
.mealy-outputs-list {
- max-height: 160px;
+ max-height: 200px;
overflow-y: auto;
- display: flex;
- flex-direction: column;
- gap: 6px;
-}
-
-.mealy-output-row {
- display: flex;
- align-items: center;
- gap: 10px;
-}
-
-.mealy-output-lbl {
- font-family: var(--sans);
- font-size: .72rem;
- color: var(--text2);
- flex-shrink: 0;
-}
-
-.mealy-output-row .sel {
- flex: 1;
}
.modal-lbl {
@@ -2786,7 +2768,280 @@ button.sm-stat:disabled {
}
.modal.trans-modal-wide {
- max-width: 440px;
+ max-width: 460px;
+}
+
+/* ─── The state and transition editors ───
+ One vocabulary for both dialogs, because they edit the two halves of one
+ diagram: a gap-spaced body, a narrow label column, segmented controls for
+ choices you can see, a table where a rule has one row per part, and a live
+ preview of what will be drawn.
+
+ Spaced by gaps, not by row margins. `.modal-row:last-of-type` zeroes the
+ margin of the last row in each section wrapper, which in these dialogs is
+ every section: Move used to sit flush against To with nothing between. */
+.edit-body,
+.edit-sec {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.edit-body {
+ gap: 14px;
+}
+
+.edit-body .modal-row {
+ margin: 0;
+}
+
+.edit-body .modal-row-tight {
+ margin-top: -6px;
+}
+
+.edit-body .modal-lbl {
+ min-width: 84px;
+}
+
+.edit-body .modal-section-lbl {
+ margin: 6px 0 0;
+}
+
+/* From → To, the edge itself. Labels over the fields so the arrow can sit on
+ the line between the two states, where it reads as the diagram does. */
+.trans-route {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+ column-gap: 10px;
+ row-gap: 6px;
+ align-items: center;
+ padding-bottom: 14px;
+ border-bottom: 1px solid var(--border);
+}
+
+.trans-route > * {
+ min-width: 0;
+}
+
+.trans-route-lbl {
+ font-family: var(--sans);
+ font-size: .72rem;
+ color: var(--text2);
+}
+
+.trans-route-arrow {
+ font-size: 1.1rem;
+ line-height: 1;
+ color: var(--accent);
+}
+
+/* A segmented control: the options laid out where they can be seen and
+ pressed. A direction strip is radios (one of them); the state's roles are
+ checkboxes (any of them), each a real inside its label. */
+.seg {
+ flex: 1;
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: minmax(0, 1fr);
+ min-width: 0;
+ padding: 2px;
+ gap: 2px;
+ background: var(--bg3);
+ border: 1px solid var(--border);
+ border-radius: var(--field-radius);
+}
+
+.seg-btn {
+ appearance: none;
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ min-width: 0;
+ padding: 4px 8px;
+ border: 1px solid transparent;
+ border-radius: calc(var(--field-radius) - 2px);
+ background: transparent;
+ color: var(--text2);
+ font-family: var(--sans);
+ font-size: .75rem;
+ cursor: pointer;
+ white-space: nowrap;
+ user-select: none;
+ transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
+}
+
+.seg-btn:hover {
+ color: var(--text);
+ background: var(--surface3);
+}
+
+.seg-btn:focus-visible,
+.seg-btn:has(> .seg-check:focus-visible) {
+ outline: none;
+ box-shadow: 0 0 0 2px var(--focus-ring);
+}
+
+.seg-btn.active,
+.seg-btn:has(> .seg-check:checked) {
+ background: var(--bg2);
+ color: var(--accent);
+ border-color: var(--accent-border);
+ font-weight: 600;
+}
+
+/* Present for the keyboard and the accessibility tree, drawn by its label. */
+.seg-check {
+ position: absolute;
+ opacity: 0;
+ width: 1px;
+ height: 1px;
+ margin: 0;
+ pointer-events: none;
+}
+
+.seg-glyph {
+ font-family: var(--mono);
+ font-size: .95rem;
+ line-height: 1;
+}
+
+.seg-compact .seg-btn {
+ padding: 4px 9px;
+}
+
+/* A rule with one row per part — a tape, an outgoing edge — as a table rather
+ than a stack of sections. The columns are set per use. */
+.edit-grid {
+ display: grid;
+ column-gap: 8px;
+ row-gap: 8px;
+ align-items: center;
+}
+
+.edit-grid > * {
+ min-width: 0;
+}
+
+.mtm-grid {
+ grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
+}
+
+.mealy-grid {
+ grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr);
+}
+
+.edit-grid-head {
+ font-family: var(--sans);
+ font-size: .65rem;
+ font-weight: 600;
+ letter-spacing: .06em;
+ text-transform: uppercase;
+ color: var(--text3);
+}
+
+.edit-grid .inp {
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.edit-grid-sym {
+ font-family: var(--mono);
+ font-size: .78rem;
+ color: var(--text);
+}
+
+.edit-grid-to {
+ font-family: var(--mono);
+ font-size: .75rem;
+ color: var(--text2);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.mtm-tape {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 22px;
+ height: 22px;
+ justify-self: center;
+ border-radius: 50%;
+ background: var(--surface3);
+ color: var(--text2);
+ font-family: var(--mono);
+ font-size: .72rem;
+}
+
+.mtm-move {
+ display: flex;
+}
+
+/* What the reserved symbols mean, said once under a table too narrow to
+ say it in every menu. */
+.edit-legend {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px 14px;
+ font-family: var(--sans);
+ font-size: .68rem;
+ color: var(--text3);
+}
+
+.edit-legend b {
+ font-family: var(--mono);
+ font-weight: 600;
+ color: var(--text2);
+ margin-right: 2px;
+}
+
+/* What will be drawn, drawn by the canvas (js/edit-preview.js): the node and
+ edge classes in css/canvas.css paint it, on the canvas's own ground, so it
+ follows the theme and the label style the way the diagram does. Dashed:
+ derived from the fields, and saved nowhere until the dialog is confirmed
+ (see the top of css/views.css). */
+.edit-preview {
+ display: flex;
+ justify-content: center;
+ border: 1px dashed var(--border2);
+ border-radius: 10px;
+ background: var(--bg);
+ padding: 6px 10px;
+ overflow: hidden;
+}
+
+/* At the canvas's 100% (its width and height attributes are the drawing's
+ own), scaled down only when the dialog is narrower than the drawing. */
+.edit-preview-svg {
+ display: block;
+ max-width: 100%;
+ height: auto;
+ overflow: visible;
+}
+
+/* Nothing in a preview is a target; the canvas's hover rules are for a
+ diagram you can press. */
+.edit-preview-svg * {
+ pointer-events: none;
+}
+
+/* An edge drawn only because it shapes the one being edited — the reverse
+ edge, which is what bends this one. */
+.edit-preview-svg .edit-preview-context {
+ opacity: .4;
+}
+
+/* The row being edited, in a label that stacks several. */
+.edit-preview-svg .tlbl tspan.edit-preview-focus {
+ fill: var(--accent);
+ font-weight: 700;
+}
+
+.edit-preview-svg .edge-pill-row.edit-preview-focus .edge-pill rect {
+ stroke: var(--accent);
+ stroke-width: 1.5px;
}
/* ─── TABS ─── */
diff --git a/css/views.css b/css/views.css
index f08da19..e24b00b 100644
--- a/css/views.css
+++ b/css/views.css
@@ -34,7 +34,10 @@
(tape the machine has not written), .tv-cell.is-ghost (a projected repeat),
.example-chip.is-pending (a word not committed yet), .example-card-add,
.gram-stub, .canvas-info-btn.is-invite, .wiz-example (all "add one here"),
- and .pn-body (a port, derived on every rebuild). ══════════════════════════ */
+ .pn-body (a port, derived on every rebuild), .edit-preview (the state and
+ transition dialogs' drawing of what they will make, saved nowhere until
+ confirmed) and .edge-pill-more (a count of rules a dense edge's label does
+ not draw, not a rule). ═══════════════════════════════════════════════════ */
.view-container {
flex: 1;
diff --git a/index.html b/index.html
index 688044a..f4f9cc4 100644
--- a/index.html
+++ b/index.html
@@ -1507,10 +1507,21 @@
Ad
placeholder="ε, or A|BC — stacks inserted over the top one" autocomplete="off">
-
-
Tape
-
Write
+
Tape
+
Write
-
Move
-
+
+
Move
+
+
-
-
Output
+
+
Output
Output
-
-
Probability
-
P
+
Probability
-
-
To
+
+
+
+
+
+
@@ -1568,28 +1587,42 @@
Ad
-
Configure State
+
Edit State
+
+
Name
Use _, space or - to break long names onto multiple lines inside the node.
-
Start
-
Accept
-
-
Output λ
+
+
Role
+
+
+
+
-
-
Priority Ω
+
+
Output
+
+
+
Priority Ω
Lower priorities dominate. Even accepts, odd rejects.
-
-
Outgoing Transition Outputs (λ)
+
+
Outputs on outgoing transitions
+
+
+
+
@@ -2500,6 +2533,13 @@
Checkin
Add to StateMate Context
+
+
+
+ Edit State
+
Set Start
@@ -2508,10 +2548,6 @@
Checkin
Toggle Accept
-
-
- Rename
-
Add Note
diff --git a/js/edge-label-editor.js b/js/edge-label-editor.js
index 643813f..7142703 100644
--- a/js/edge-label-editor.js
+++ b/js/edge-label-editor.js
@@ -37,7 +37,7 @@ import { $, App, getMachineConfig, isReadOnlyHeadMachine } from './state.js';
import { isMultiTape, transitionFieldsOf } from './machines/index.js';
import { parseEps } from './machines/predicates.js';
import { formatWeight, getTransition, openTransModal, saveTransition, transitionSymbolChoices } from './states-transitions.js';
-import { edgeLabelAnchor } from './render.js';
+import { edgeLabelAnchor, edgeLabelLineOf } from './render.js';
import { viewEdgeGroup } from './view-graph.js';
import { hideSymSuggest, handleSymSuggestActive, handleSymSuggestKeyup, refreshSymSuggest, trySymSuggestKeydown } from './suggest.js';
import { isCounterMachine, isQueueAutomaton, showStatus } from './utils.js';
@@ -586,8 +586,11 @@ function place() {
if (ed.pos !== 'hidden') { style.visibility = 'hidden'; ed.pos = 'hidden'; }
return;
}
- const n = ed.ids.length;
- const y = a.drawn ? a.y + (ed.row - (n - 1) / 2) * a.pitch : a.y;
+ // Over the line the rule is drawn on, which is not its index among the
+ // edge's rules once rows merge and a dense label is capped (render.js,
+ // edgeLabelLines).
+ const at = a.drawn ? edgeLabelLineOf(ed.key, ed.t.id) : null;
+ const y = at ? a.y + (at.line - (at.lines - 1) / 2) * a.pitch : a.y;
const z = App.cam.z || 1;
const x = App.cam.x + a.x * z;
const top = App.cam.y + y * z;
diff --git a/js/edit-preview.js b/js/edit-preview.js
new file mode 100644
index 0000000..63e52d9
--- /dev/null
+++ b/js/edit-preview.js
@@ -0,0 +1,252 @@
+// ══════════════════════════════════════════════════════════════════
+// EDIT PREVIEWS
+// ══════════════════════════════════════════════════════════════════
+// The state and transition dialogs each end in a small drawing of what they
+// will make: a state with its marks, or an edge with every rule on it. It is
+// drawn by the canvas's own code, not a likeness of it — the node and edge
+// classes css/canvas.css paints (`.sn`, `.bd`, `.acc-ring`, `.state-sub`,
+// `.priority-badge`, `.tarr`, `.tlbl`, the pills), the shapes geometry.js
+// computes (edgeGeometryFor, selfLoopPath, labelRestPoint), and the label
+// writers render.js draws the diagram's labels with. So the theme, the label
+// style, name wrapping, the bend a reverse edge forces and the loop's shape
+// all follow the canvas, and a change to any of them reaches both at once.
+//
+// What it does not take from the canvas is the layout. The dialog shows the
+// part of the machine being edited, laid out to fit: From on the left, To on
+// the right, wherever they sit in the diagram. Nothing here touches
+// App.domCache — the canvas's renderer owns that registry, and a preview is
+// a throwaway drawing, rebuilt whole on every keystroke.
+
+import { App, R } from './state.js';
+import {
+ edgeGeometryFor, estimatePillLabelSize, estimateTextLabelSize, labelRestPoint,
+ selfLoopMetrics, selfLoopPath, UP
+} from './geometry.js';
+import {
+ edgeLabelLines, edgeLabelMode, makeSVG, setStateLabelLines, splitStateLabel, startArrowD,
+ writePillLabelRows, writeTextLabelRows
+} from './render.js';
+
+const PAD = 14;
+const MIN_SPAN = 170;
+
+const renderCfg = () => (App.config && App.config.render) || {};
+const num = (v, d) => (Number.isFinite(Number(v)) ? Number(v) : d);
+
+/**
+ * A preview node: `{ id, name, x, y, start?, accept?, output?, priority? }`.
+ * `output` is a Moore state's output (drawn under the name, `—` when empty);
+ * `priority` a parity state's (drawn as the canvas's badge).
+ */
+function drawState(g, n, bounds) {
+ const node = makeSVG('g');
+ node.classList.add('sn');
+ node.classList.toggle('start-st', !!n.start);
+ node.classList.toggle('acc-st', !!n.accept);
+
+ const circle = makeSVG('circle');
+ circle.classList.add('bd');
+ circle.setAttribute('cx', n.x);
+ circle.setAttribute('cy', n.y);
+ circle.setAttribute('r', R);
+ node.appendChild(circle);
+
+ if (n.accept) {
+ const ring = makeSVG('circle');
+ ring.classList.add('acc-ring');
+ ring.setAttribute('fill', 'none');
+ ring.setAttribute('stroke', 'var(--gold)');
+ ring.setAttribute('stroke-width', '1.5');
+ ring.setAttribute('cx', n.x);
+ ring.setAttribute('cy', n.y);
+ ring.setAttribute('r', R - 5);
+ node.appendChild(ring);
+ }
+
+ const hasSub = n.output !== undefined;
+ const label = makeSVG('text');
+ label.classList.add('slbl');
+ label.setAttribute('x', n.x);
+ label.setAttribute('y', hasSub ? n.y - num(renderCfg().textMargin, 8) : n.y);
+ setStateLabelLines(label, splitStateLabel(n.name), n.x);
+ node.appendChild(label);
+
+ if (hasSub) {
+ const sub = makeSVG('text');
+ sub.classList.add('state-sub');
+ sub.setAttribute('x', n.x);
+ sub.setAttribute('y', n.y + num(renderCfg().mooreTextMargin, 9));
+ sub.textContent = n.output !== '' ? n.output : '—';
+ node.appendChild(sub);
+ }
+
+ if (n.priority !== undefined) {
+ const bx = n.x + R * 0.88, by = n.y + R * 0.62;
+ const badge = makeSVG('g');
+ badge.classList.add('priority-badge');
+ const bg = makeSVG('rect');
+ bg.setAttribute('x', bx - 10);
+ bg.setAttribute('y', by - 8);
+ bg.setAttribute('width', 20);
+ bg.setAttribute('height', 16);
+ bg.setAttribute('rx', 8);
+ const text = makeSVG('text');
+ text.classList.add('priority-value');
+ text.setAttribute('x', bx);
+ text.setAttribute('y', by);
+ text.textContent = String(n.priority);
+ badge.append(bg, text);
+ node.appendChild(badge);
+ grow(bounds, bx + 10, by + 8);
+ }
+
+ const title = makeSVG('title');
+ title.textContent = n.name;
+ node.appendChild(title);
+ g.appendChild(node);
+ grow(bounds, n.x - R, n.y - R);
+ grow(bounds, n.x + R, n.y + R);
+}
+
+function grow(b, x, y) {
+ if (x < b.x0) b.x0 = x;
+ if (y < b.y0) b.y0 = y;
+ if (x > b.x1) b.x1 = x;
+ if (y > b.y1) b.y1 = y;
+}
+
+// The lines the canvas would draw for this edge — merged and capped by the
+// canvas's own rule — with the rule being edited kept in view rather than
+// counted in `+k more`.
+function labelLines(e, mode) {
+ return edgeLabelLines(e.ts, { pills: mode.pills, beginner: mode.beginner, keep: e.focus ?? null });
+}
+
+function labelSize(lines, mode) {
+ return mode.pills ? estimatePillLabelSize(lines.map(l => l.parts)) : estimateTextLabelSize(lines.map(l => l.text));
+}
+
+/**
+ * An edge: `{ from, to, ts, focus?, context? }`. `ts` is every rule on it in
+ * the canvas's order; `focus` is the id of the rule being edited, whose line is
+ * marked so the reader can
+ * find it in a stack; `context` dims an edge drawn only because it shapes the
+ * one being edited (a reverse edge bends both).
+ */
+function drawEdge(edgesG, labelsG, e, byId, bent, bounds, mode) {
+ const from = byId.get(e.from), to = byId.get(e.to);
+ if (!from || !to || !e.ts.length) return;
+ const lines = labelLines(e, mode);
+ const size = labelSize(lines, mode);
+ let geo;
+ if (from === to) {
+ const manual = e.ts.find(t => Number.isFinite(t.loopAngle));
+ const angle = manual ? manual.loopAngle : UP;
+ const loop = selfLoopMetrics(from);
+ geo = { isSelf: true, from, angle, loop, labelSize: size, d: selfLoopPath(from.x, from.y, angle, loop) };
+ grow(bounds, from.x + loop.extent * Math.cos(angle) - loop.ss, from.y + loop.extent * Math.sin(angle) - loop.ss);
+ grow(bounds, from.x + loop.extent * Math.cos(angle) + loop.ss, from.y + loop.extent * Math.sin(angle) + loop.ss);
+ } else {
+ // A hand-set bend is kept, as the canvas keeps it; otherwise an edge with
+ // a reverse twin takes the canvas's `curveOff`, and a lone edge is straight.
+ const manual = e.ts.find(t => Number.isFinite(t.curve));
+ const crvVal = manual ? manual.curve : bent ? num(renderCfg().curveOff, 45) : 0;
+ const edge = edgeGeometryFor(from, to, crvVal, R, R, num(renderCfg().arrowHeadSize, 6));
+ if (!edge) return;
+ geo = { isSelf: false, from, to, crvVal, labelSize: size, ...edge };
+ grow(bounds, edge.mx, edge.my);
+ }
+
+ const path = makeSVG('path');
+ path.classList.add('tarr');
+ path.setAttribute('d', geo.d);
+ path.setAttribute('marker-end', 'url(#arr)');
+ const group = makeSVG('g');
+ group.classList.add('edge-g');
+ if (e.context) group.classList.add('edit-preview-context');
+ group.appendChild(path);
+ edgesG.appendChild(group);
+
+ const at = labelRestPoint(geo);
+ grow(bounds, at.x - size.w / 2, at.y - size.h / 2);
+ grow(bounds, at.x + size.w / 2, at.y + size.h / 2);
+ let label;
+ if (mode.pills) {
+ label = makeSVG('g');
+ label.classList.add('tlbl', 'edge-pill-label');
+ label.classList.toggle('edge-pill-beginner', mode.beginner);
+ writePillLabelRows(label, lines.map(l => l.parts));
+ label.setAttribute('transform', `translate(${at.x} ${at.y})`);
+ } else {
+ label = makeSVG('text');
+ label.classList.add('tlbl');
+ label.setAttribute('dominant-baseline', 'central');
+ label.setAttribute('text-anchor', 'middle');
+ label.setAttribute('x', at.x);
+ label.setAttribute('y', at.y);
+ writeTextLabelRows(label, lines, at.x);
+ }
+ if (e.context) label.classList.add('edit-preview-context');
+ if (e.focus && lines.length > 1) {
+ lines.forEach((l, i) => {
+ if (l.ids.includes(e.focus)) label.querySelector(`[data-row="${i}"]`)?.classList.add('edit-preview-focus');
+ });
+ }
+ labelsG.appendChild(label);
+}
+
+/**
+ * Draw `nodes` and `edges` into `svg`, in the canvas's paint order — start
+ * arrow, edges, labels, states — and size the drawing to what it holds at the
+ * canvas's own scale, shrinking only when the dialog is narrower than that.
+ */
+export function drawEditPreview(svg, { nodes = [], edges = [] } = {}) {
+ if (!svg) return;
+ svg.innerHTML = '';
+ const bounds = { x0: Infinity, y0: Infinity, x1: -Infinity, y1: -Infinity };
+ const byId = new Map(nodes.map(n => [n.id, n]));
+ const mode = edgeLabelMode();
+ const edgesG = makeSVG('g');
+ const labelsG = makeSVG('g');
+ const statesG = makeSVG('g');
+
+ const start = nodes.find(n => n.start);
+ if (start) {
+ const a = makeSVG('path');
+ a.setAttribute('stroke', 'var(--green)');
+ a.setAttribute('stroke-width', '1.5');
+ a.setAttribute('fill', 'none');
+ a.setAttribute('marker-end', 'url(#arr)');
+ a.setAttribute('d', startArrowD(start));
+ svg.appendChild(a);
+ grow(bounds, start.x - R - num(renderCfg().startArrowLen, 28), start.y);
+ }
+
+ const pairs = new Set(edges.map(e => `${e.from}|${e.to}`));
+ for (const e of edges) {
+ const bent = e.from !== e.to && pairs.has(`${e.to}|${e.from}`);
+ drawEdge(edgesG, labelsG, e, byId, bent, bounds, mode);
+ }
+ for (const n of nodes) drawState(statesG, n, bounds);
+ svg.append(edgesG, labelsG, statesG);
+
+ if (!Number.isFinite(bounds.x0)) return;
+ const x = bounds.x0 - PAD, y = bounds.y0 - PAD;
+ const w = bounds.x1 - bounds.x0 + PAD * 2, h = bounds.y1 - bounds.y0 + PAD * 2;
+ svg.setAttribute('viewBox', `${x} ${y} ${w} ${h}`);
+ // Drawn at the canvas's 100% — a label in the preview is the size it will be
+ // on the diagram — and CSS max-width scales it down only when it has to.
+ svg.setAttribute('width', w);
+ svg.setAttribute('height', h);
+}
+
+/**
+ * How far apart to stand two states so their edge's labels fit between them,
+ * the way they would on a diagram laid out with room for them.
+ */
+export function previewSpan(edges) {
+ const mode = edgeLabelMode();
+ let widest = 0;
+ for (const e of edges) if (e.from !== e.to && e.ts.length) widest = Math.max(widest, labelSize(labelLines(e, mode), mode).w);
+ return Math.max(MIN_SPAN, widest + 2 * R + 40);
+}
diff --git a/js/examples/mtm-classic.json b/js/examples/mtm-classic.json
index 102d496..750017a 100644
--- a/js/examples/mtm-classic.json
+++ b/js/examples/mtm-classic.json
@@ -65,7 +65,7 @@
"id": "t3",
"from": "s1",
"to": "s2",
- "symbol": "ε",
+ "symbol": "⊔",
"tapeSyms": [ "⊔", "⊔" ],
"tapeWrites": [ "⊔", "⊔" ],
"tapeDirs": [ "S", "S" ]
diff --git a/js/geometry.js b/js/geometry.js
index 1c0c96a..82981af 100644
--- a/js/geometry.js
+++ b/js/geometry.js
@@ -908,12 +908,37 @@ export function pathPoint(geo, t) {
return { x: geo.sx + (geo.ex - geo.sx) * t, y: geo.sy + (geo.ey - geo.sy) * t };
}
+// Half the path's stroke width on top of the gap, so the box clears the line
+// it belongs to rather than resting on it.
+function labelStandoff(h) { return h / 2 + labelGap() + 2; }
+
+// Put the label on the outside of the edge's own bend: clearer, and where a
+// reader looks for it. A straight edge has no bend, so the side is the one
+// that reads as "above" on screen.
+function labelOutward(geo) {
+ return geo.crvVal !== 0 ? Math.sign(geo.crvVal) : (-geo.py + geo.px * 0.05 >= 0 ? 1 : -1);
+}
+
+/**
+ * Where a label goes with nothing in its way: placeLabel's first candidate.
+ * The dialogs' previews draw an edge on its own, so this is the whole of the
+ * placement they need — and it is the same arithmetic, not a copy of it.
+ */
+export function labelRestPoint(geo) {
+ const { h } = geo.labelSize;
+ if (geo.isSelf) {
+ const d = geo.loop.extent + labelGap() + h / 2;
+ return { x: geo.from.x + d * Math.cos(geo.angle), y: geo.from.y + d * Math.sin(geo.angle) };
+ }
+ const p = pathPoint(geo, LABEL_SLIDES[0].t);
+ const d = labelStandoff(h) * labelOutward(geo);
+ return { x: p.x + geo.px * d, y: p.y + geo.py * d };
+}
+
function placeLabel(geo, ctx) {
const { w, h } = geo.labelSize;
const gap = labelGap();
- // Half the path's stroke width on top of the gap, so the box clears the line
- // it belongs to rather than resting on it.
- const standoff = h / 2 + gap + 2;
+ const standoff = labelStandoff(h);
const push = Math.max(12, h * 0.8);
// Candidates are generated ideal-first and taken in that order, so a label
@@ -926,12 +951,10 @@ function placeLabel(geo, ctx) {
candidates.push({ x: geo.from.x + d * ux, y: geo.from.y + d * uy, cost: k * 3 });
}
} else {
- // Put the label on the outside of the edge's own bend: clearer, and where a
- // reader looks for it. A straight edge has no bend, so the side is the one
- // that reads as "above" on screen — and the search below moves it if that
- // side is taken.
+ // The outside of the bend first (labelOutward), and the search below moves
+ // it if that side is taken.
const nx = geo.px, ny = geo.py;
- const outward = geo.crvVal !== 0 ? Math.sign(geo.crvVal) : (-ny + nx * 0.05 >= 0 ? 1 : -1);
+ const outward = labelOutward(geo);
for (const k of LABEL_PUSHES) {
for (const slide of LABEL_SLIDES) {
for (const side of [outward, -outward]) {
diff --git a/js/render.js b/js/render.js
index 7627485..09ed33a 100644
--- a/js/render.js
+++ b/js/render.js
@@ -18,7 +18,7 @@ import { thumbBounds, thumbEdgePairs, thumbEdgePath, thumbEdgeSegments, thumbSub
import { enterBlockScope } from './scope.js';
import { blockAncestry } from './blocks.js';
import { openEdgeLabelEditor } from './edge-label-editor.js';
-import { edgeTipFor, getState, showContextMenu, transLabel, transLabelDescriptive, transLabelParts } from './states-transitions.js';
+import { edgeTipFor, getState, openTransModal, showContextMenu, transLabel, transLabelDescriptive, transLabelParts } from './states-transitions.js';
import { Change, changed, emit, subscribe } from './store.js';
import { createMemo, reactiveRoot } from './reactive.js';
import { setSectionStatus } from './section-status.js';
@@ -198,10 +198,12 @@ function edgeLabelSizeFor(ts) {
// Same reasoning for a scope's boundary edges: they carry no rule, so they
// draw no label, so nothing should be laid out around one.
if (ts.every(t => t.port)) return { w: 0, h: 0 };
+ // The lines the edge will draw — merged and capped — not one per rule, or
+ // a dense edge is placed clear of a box several times taller than its label.
if (style === 'pills' || style === 'beginner') {
- return estimatePillLabelSize(ts.map(t => transLabelParts(t, style === 'beginner')));
+ return estimatePillLabelSize(edgeLabelLines(ts, { pills: true, beginner: style === 'beginner' }).map(l => l.parts));
}
- return estimateTextLabelSize(ts.map(transLabel));
+ return estimateTextLabelSize(edgeLabelLines(ts).map(l => l.text));
}
// One layout pass over the whole diagram: every edge path, self-loop direction
@@ -304,7 +306,7 @@ function displayGeo(geo, dt) {
* the next full render. The half-width is asked of the node, since a block is a
* box and a state is a circle.
*/
-function startArrowD(node) {
+export function startArrowD(node) {
const al = App.config.render.startArrowLen, ah = App.config.render.arrowHeadSize;
const half = node.box ? node.box.w / 2 : R;
return `M ${node.x - half - al} ${node.y} L ${node.x - half - ah} ${node.y}`;
@@ -393,7 +395,7 @@ function createEdgeNode(key) {
// move it out from under the second click of the double-click.
for (const lbl of [textEl, pillEl]) {
lbl.addEventListener('pointerdown', e => {
- if (edgeDoublePress(e, edgeGrp)) { openEdgeLabelEditor(key, labelHitAt(lbl, e)); return; }
+ if (edgeDoublePress(e, edgeGrp)) { editLabelLine(key, edgeGrp, labelHitAt(lbl, e)); return; }
onEdgeDown(e, key, edgeGrp, { bend: false });
});
lbl.addEventListener('contextmenu', e => onEdgeContextMenu(e, key, edgeGrp));
@@ -517,6 +519,37 @@ function labelHitAt(lbl, e) {
return { row: 0, role: null };
}
+// A drawn line is one rule, several merged into one row, or `+k more`. One
+// rule is edited in place, as every row was before rows could merge; several
+// open the dialog with exactly those rules in its picker, since the strip
+// edits one rule and guessing which would edit the wrong one.
+function editLabelLine(key, edgeGrp, hit) {
+ const info = edgeGroupFor(key);
+ if (!info) return;
+ const line = edgeGrp.__lines && edgeGrp.__lines[hit.row];
+ if (!line) { openEdgeLabelEditor(key, hit); return; }
+ if (line.ids.length === 1) {
+ const row = info.ts.findIndex(t => t.id === line.ids[0]);
+ openEdgeLabelEditor(key, { ...hit, row: Math.max(0, row) });
+ return;
+ }
+ const picked = info.ts.filter(t => line.ids.includes(t.id));
+ openTransModal(picked[0].from, picked[0].to, { mode: 'edit', transId: picked[0].id, transitions: picked });
+}
+
+/**
+ * Which drawn line of an edge's label holds rule `tid`, and how many lines the
+ * label has — for the label editor, which sits over the line it is editing.
+ * A rule hidden behind `+k more` is on that line. Null when nothing is drawn.
+ */
+export function edgeLabelLineOf(key, tid) {
+ const node = App.domCache.transitions.get(key);
+ const lines = node && node.__lines;
+ if (!lines || !lines.length) return null;
+ const line = lines.findIndex(l => l.ids.includes(tid));
+ return line === -1 ? null : { line, lines: lines.length };
+}
+
// One row of the compact label: the tspans step by 1.2em at the 11px .tlbl
// sets in css/canvas.css.
const TLBL_ROW_PITCH = 13.2;
@@ -588,6 +621,8 @@ function syncEdgeNode(edgeGrp, geo, ts, lod = false) {
// asking transLabel() for the label of a thing that is not a transition
// produces.
const hidden = lod || edgeLabelsHidden() || isPortEdge(ts);
+ // Two comparisons rather than edgeLabelMode(): this runs per edge per frame,
+ // and that returns a fresh object.
const pillMode = App.config.edgeLabelStyle === 'pills' || App.config.edgeLabelStyle === 'beginner';
const beginnerMode = App.config.edgeLabelStyle === 'beginner';
@@ -607,6 +642,7 @@ function syncEdgeNode(edgeGrp, geo, ts, lod = false) {
}
parts.textEl.style.display = 'none';
parts.pillEl.style.display = 'none';
+ edgeGrp.__lines = null;
// The tooltip is a grid and the accessible name is prose — see
// edgeTipFor(). Two renderings of one description, and this is the branch
@@ -628,21 +664,16 @@ function syncEdgeNode(edgeGrp, geo, ts, lod = false) {
}
edgeGrp.classList.remove('port-edge');
- const lbls = ts.map(transLabel);
+ // One build serves both drawings; the press handler and the label editor
+ // read the rules a drawn line stands for back off `__lines`.
+ const lines = edgeLabelLines(ts, { pills: true, beginner: beginnerMode });
+ edgeGrp.__lines = lines;
// Rebuild the tspans only when the label text changes. Geometry changes —
// a state moving, an edge bending — just reposition them, so dragging
// allocates nothing.
- const labelKey = lbls.join('\u0001');
+ const labelKey = lines.map(l => l.text).join('\u0001');
if (edgeGrp.__labelKey !== labelKey) {
- parts.textEl.innerHTML = '';
- lbls.forEach((lbl, i) => {
- const tspan = makeSVG('tspan');
- tspan.textContent = lbl;
- tspan.setAttribute('data-row', i);
- tspan.setAttribute('x', geo.lx);
- tspan.setAttribute('dy', i === 0 ? `-${(lbls.length - 1) * 0.6}em` : '1.2em');
- parts.textEl.appendChild(tspan);
- });
+ writeTextLabelRows(parts.textEl, lines, geo.lx);
edgeGrp.__labelKey = labelKey;
edgeGrp.__labelX = geo.lx;
} else if (edgeGrp.__labelX !== geo.lx) {
@@ -652,45 +683,10 @@ function syncEdgeNode(edgeGrp, geo, ts, lod = false) {
setGeoAttr(parts.textEl, 'x', geo.lx);
setGeoAttr(parts.textEl, 'y', geo.ly);
- const pillRows = ts.map(t => transLabelParts(t, beginnerMode));
+ const pillRows = lines.map(l => l.parts);
const pillKey = pillRows.map(row => row.map(p => `${p.role}:${p.text}`).join('\u0002')).join('\u0001');
if (edgeGrp.__pillKey !== pillKey) {
- parts.pillEl.innerHTML = '';
- // Pill widths come from geometry.js because the layout pass sized the label
- // box from the same numbers before choosing where to put it. Two independent
- // copies of this arithmetic would drift, and the label would then be placed
- // clear of a box that is not the one being drawn.
- pillRows.forEach((row, rowIndex) => {
- const widths = row.map(p => pillPartWidth(p.text));
- const total = widths.reduce((sum, width) => sum + width, 0) + Math.max(0, row.length - 1) * PILL_GAP;
- let x = -total / 2;
- const rowEl = makeSVG('g');
- rowEl.classList.add('edge-pill-row');
- rowEl.setAttribute('data-row', rowIndex);
- rowEl.setAttribute('transform', `translate(0 ${rowIndex * PILL_ROW_H - (pillRows.length - 1) * PILL_ROW_H / 2})`);
- row.forEach((part, i) => {
- const item = makeSVG('g');
- item.classList.add('edge-pill', `edge-pill-${part.role}`);
- item.setAttribute('data-role', part.role);
- item.setAttribute('data-part', i);
- item.setAttribute('transform', `translate(${x} ${-PILL_HEIGHT / 2})`);
- const rect = makeSVG('rect');
- rect.setAttribute('width', widths[i]);
- rect.setAttribute('height', PILL_HEIGHT);
- rect.setAttribute('rx', 5);
- const label = makeSVG('text');
- label.setAttribute('x', widths[i] / 2);
- label.setAttribute('y', PILL_HEIGHT / 2);
- label.setAttribute('dominant-baseline', 'central');
- label.setAttribute('text-anchor', 'middle');
- label.textContent = part.text;
- item.appendChild(rect);
- item.appendChild(label);
- rowEl.appendChild(item);
- x += widths[i] + PILL_GAP;
- });
- parts.pillEl.appendChild(rowEl);
- });
+ writePillLabelRows(parts.pillEl, pillRows);
edgeGrp.__pillKey = pillKey;
}
setGeoAttr(parts.pillEl, 'transform', `translate(${geo.lx} ${geo.ly})`);
@@ -705,6 +701,190 @@ function syncEdgeNode(edgeGrp, geo, ts, lod = false) {
return true;
}
+// ── edge label writers ──
+//
+// An edge label's two drawings, one row per transition. Shared by the canvas
+// and the state and transition dialogs' previews (js/edit-preview.js), which
+// draw the edge being edited with exactly this code so it cannot read
+// differently from the edge it will become.
+
+// ── dense edges ──
+//
+// An edge's label used to be one row per rule, which is right for an edge with
+// two rules and wrong for one with nine: a DFA over a 36-symbol alphabet drew
+// every edge as a tower of single characters, at four states and 144 rules —
+// a machine the large-machine profile, which counts the whole machine against
+// a performance line, rightly calls small. Crowding is a property of the edge,
+// not of the machine, so it is decided here, per edge, at any size.
+//
+// Two steps. Rules whose labels differ only in what they read share a row, the
+// way a textbook writes them — `b, f, j → q3` rather than three arrows' worth of
+// text — and a long list of symbols wraps. Then an edge with more lines than
+// LABEL_MAX_LINES shows the rows that fit and `+k more`, k counted in rules.
+// The tooltip, the δ list and the transition dialog still say every rule.
+//
+// A line remembers the rules it stands for (`ids`), because a row is no longer
+// one rule: the label editor resolves a press through it, and the dialog's
+// preview marks the rule being edited by it.
+export const LABEL_MAX_LINES = 4;
+const LABEL_WRAP_CHARS = 28;
+
+/**
+ * The lines an edge's label draws, from its rules in drawing order.
+ * Each line is `{ text, parts, ids, more? }`: `text` for the compact label,
+ * `parts` (only when `pills`) for the pill label, `ids` the rules it stands for.
+ * `keep` names a rule whose row must be drawn rather than counted in `+k more`
+ * — the dialog's preview passes the rule being edited.
+ */
+export function edgeLabelLines(ts, { pills = false, beginner = false, keep = null } = {}) {
+ const rows = [];
+ const byRest = new Map();
+ for (const t of ts) {
+ const text = String(transLabel(t));
+ const parts = pills ? transLabelParts(t, beginner) : null;
+ const sym = String(t.symbol);
+ // Mergeable when the label leads with the read symbol and nothing else in
+ // it mentions which symbol was read. A multi-tape rule reads a tuple, so
+ // its first tape's symbol is not the whole of what it reads.
+ const inputAt = parts ? parts.findIndex(p => p.role === 'input') : -1;
+ const mergeable = !t.tapeSyms && text.startsWith(sym) && (!parts || inputAt !== -1);
+ const rest = text.slice(sym.length);
+ // Keyed on the text alone, so the compact and pill labels merge the same
+ // rules and one line map serves both: the pills are drawn from the same
+ // fields the text is, so two rules with one rest have one set of pills.
+ const key = mergeable ? rest : null;
+ let row = key !== null ? byRest.get(key) : null;
+ if (!row) {
+ row = { ids: [], syms: [], text, rest: mergeable ? rest : null, parts, inputAt };
+ rows.push(row);
+ if (key !== null) byRest.set(key, row);
+ }
+ row.ids.push(t.id);
+ row.syms.push(sym);
+ }
+
+ const linesOf = row => {
+ if (row.ids.length === 1) return [{ text: row.text, parts: row.parts, ids: row.ids }];
+ // A rest that opens with a comma (a PDA's `, A → AA`) would run into a
+ // comma-separated list and read as one more symbol, so the list is braced.
+ const brace = row.rest.startsWith(',');
+ // Balanced rather than greedy: greedy filled the first line and left the
+ // last symbol alone on the second — `a, e, i, m, q, u, y, 2,` over `6`.
+ // So the number of lines comes from the width, and the symbols are dealt
+ // out evenly across them.
+ const width = row.syms.join(', ').length;
+ const count = Math.max(1, Math.ceil(width / LABEL_WRAP_CHARS));
+ const per = Math.ceil(row.syms.length / count);
+ const chunks = [];
+ for (let i = 0; i < row.syms.length; i += per) chunks.push(row.syms.slice(i, i + per));
+ return chunks.map((c, i) => {
+ const first = i === 0, last = i === chunks.length - 1;
+ const list = (brace && first ? '{' : '') + c.join(', ') + (brace && last ? '}' : last ? '' : ',');
+ const text = last ? list + row.rest : list;
+ let parts = null;
+ if (row.parts) {
+ const input = { ...row.parts[row.inputAt], text: (beginner && first ? 'Read ' : '') + c.join(', ') + (last ? '' : ',') };
+ parts = last ? row.parts.map((p, k) => (k === row.inputAt ? input : p)) : [input];
+ }
+ return { text, parts, ids: row.ids };
+ });
+ };
+
+ // The kept rule's row goes first only if it would otherwise be hidden, so a
+ // label that fits reads in the canvas's order.
+ const all = rows.map(linesOf);
+ const total = all.reduce((n, ls) => n + ls.length, 0);
+ if (total <= LABEL_MAX_LINES) return all.flat();
+ if (keep) {
+ const at = rows.findIndex(r => r.ids.includes(keep));
+ let shown = 0;
+ for (let i = 0; i < at; i++) shown += all[i].length;
+ if (at > 0 && shown + all[at].length > LABEL_MAX_LINES - 1) all.unshift(...all.splice(at, 1));
+ }
+ const out = [];
+ const shownIds = new Set();
+ for (const ls of all) {
+ if (out.length + ls.length > LABEL_MAX_LINES - 1) break;
+ out.push(...ls);
+ for (const id of ls[0].ids) shownIds.add(id);
+ }
+ if (!out.length) {
+ // One row too long for the label on its own: as much of it as fits.
+ const ls = all[0].slice(0, LABEL_MAX_LINES - 1);
+ const tail = ls[ls.length - 1];
+ ls[ls.length - 1] = { ...tail, text: tail.text.replace(/,?$/, ' …') };
+ out.push(...ls);
+ for (const id of ls[0].ids) shownIds.add(id);
+ }
+ const hidden = ts.filter(t => !shownIds.has(t.id)).map(t => t.id);
+ if (hidden.length) {
+ const say = `+${hidden.length} more`;
+ out.push({ text: say, parts: pills ? [{ role: 'more', text: say }] : null, ids: hidden, more: true });
+ }
+ return out;
+}
+
+/** The compact label: one centred tspan per line, stacked about the text's y. */
+export function writeTextLabelRows(textEl, lines, x) {
+ textEl.innerHTML = '';
+ lines.forEach((line, i) => {
+ const lbl = typeof line === 'string' ? line : line.text;
+ const tspan = makeSVG('tspan');
+ tspan.textContent = lbl;
+ if (line && line.more) tspan.classList.add('tlbl-more');
+ tspan.setAttribute('data-row', i);
+ tspan.setAttribute('x', x);
+ tspan.setAttribute('dy', i === 0 ? `-${(lines.length - 1) * 0.6}em` : '1.2em');
+ textEl.appendChild(tspan);
+ });
+}
+
+/** The pill label: a row of role-coloured pills per transition, centred on the group's origin. */
+export function writePillLabelRows(pillEl, pillRows) {
+ pillEl.innerHTML = '';
+ // Pill widths come from geometry.js because the layout pass sized the label
+ // box from the same numbers before choosing where to put it. Two independent
+ // copies of this arithmetic would drift, and the label would then be placed
+ // clear of a box that is not the one being drawn.
+ pillRows.forEach((row, rowIndex) => {
+ const widths = row.map(p => pillPartWidth(p.text));
+ const total = widths.reduce((sum, width) => sum + width, 0) + Math.max(0, row.length - 1) * PILL_GAP;
+ let x = -total / 2;
+ const rowEl = makeSVG('g');
+ rowEl.classList.add('edge-pill-row');
+ rowEl.setAttribute('data-row', rowIndex);
+ rowEl.setAttribute('transform', `translate(0 ${rowIndex * PILL_ROW_H - (pillRows.length - 1) * PILL_ROW_H / 2})`);
+ row.forEach((part, i) => {
+ const item = makeSVG('g');
+ item.classList.add('edge-pill', `edge-pill-${part.role}`);
+ item.setAttribute('data-role', part.role);
+ item.setAttribute('data-part', i);
+ item.setAttribute('transform', `translate(${x} ${-PILL_HEIGHT / 2})`);
+ const rect = makeSVG('rect');
+ rect.setAttribute('width', widths[i]);
+ rect.setAttribute('height', PILL_HEIGHT);
+ rect.setAttribute('rx', 5);
+ const label = makeSVG('text');
+ label.setAttribute('x', widths[i] / 2);
+ label.setAttribute('y', PILL_HEIGHT / 2);
+ label.setAttribute('dominant-baseline', 'central');
+ label.setAttribute('text-anchor', 'middle');
+ label.textContent = part.text;
+ item.appendChild(rect);
+ item.appendChild(label);
+ rowEl.appendChild(item);
+ x += widths[i] + PILL_GAP;
+ });
+ pillEl.appendChild(rowEl);
+ });
+}
+
+/** Which of the two label drawings the reader has chosen, and whether pills speak in sentences. */
+export function edgeLabelMode() {
+ const style = App.config.edgeLabelStyle;
+ return { pills: style === 'pills' || style === 'beginner', beginner: style === 'beginner' };
+}
+
// The start-state arrow is a single node, kept in the same registry style as
// the edges so renderAll no longer has to re-query for it.
function syncStartArrow(g) {
@@ -1144,7 +1324,6 @@ function createStateNode(id) {
App.ctxEdge = null;
App.ctxMode = 'state';
const toggleOpt = $('ctx-toggle-acc');
- const renameLbl = document.querySelector('#ctx-rename .ctx-label');
if (toggleOpt) toggleOpt.style.display = acceptsAreShown() ? '' : 'none';
// Only a machine with a stay move can leave a block without consuming a
// symbol, so only those can have one at all (see machineSupportsBlocks).
@@ -1153,7 +1332,6 @@ function createStateNode(id) {
// should have been the answer.
const groupOpt = $('ctx-group-block');
if (groupOpt) groupOpt.style.display = machineSupportsBlocks() ? '' : 'none';
- if (renameLbl) renameLbl.textContent = (App.machine === 'Moore' || App.machine === 'Mealy') ? 'Configure' : 'Rename';
showContextMenu('state', e.clientX, e.clientY);
});
diff --git a/js/states-transitions.js b/js/states-transitions.js
index 8226159..a3795f6 100644
--- a/js/states-transitions.js
+++ b/js/states-transitions.js
@@ -3,14 +3,16 @@ import { invalidateTransitionIndex } from './machines/runtime.js';
import { snapshot } from './history.js';
import { closeModal, registerModal, showOverlay } from './modal.js';
import { pruneNoteAnchorsExcluding } from './notes.js';
-import { renderAll } from './render.js';
+import { acceptsAreShown, renderAll } from './render.js';
+import { drawEditPreview, previewSpan } from './edit-preview.js';
import { $, App, getMachineConfig, getState, isBoundarySymbol, isReadOnlyHeadMachine, isWeightedFA, statePriority, usesParityPriorities, wrapStateLabelsOn } from './state.js';
import { Change, emit } from './store.js';
-import { counterBottomViolation, hasStateOutput, hasTransitionOutput, isAnyPDA, isCounterMachine, isEmbeddedMachine, isQueueAutomaton, isSingleTapeTM, isTwoStackPDA, parseEps, showStatus } from './utils.js';
+import { counterBottomViolation, escapeHtml, hasStateOutput, hasTransitionOutput, isAnyPDA, isCounterMachine, isEmbeddedMachine, isQueueAutomaton, isSingleTapeTM, isTwoStackPDA, parseEps, showStatus } from './utils.js';
import { isMultiTape, machineDeterminism, machineStoreLabels, transitionHasField } from './machines/index.js';
import { applyMachineSwitch } from './view.js';
import { viewEdgeKeyFor, viewStates } from './view-graph.js';
import { getBlock } from './blocks.js';
+import { enhanceCustomSelect } from './dropdown.js';
// ══════════════════════════════════════════════════════════════════
// STATE MANAGEMENT
@@ -89,6 +91,12 @@ export function setTransitionModalMode(mode) {
const isEdit = mode === 'edit';
if (title) title.textContent = isEdit ? 'Edit Transition' : 'Add Transition';
if (confirmBtn) confirmBtn.textContent = isEdit ? 'Save' : 'Add';
+ // The picker over an edge's rules chooses the rule being edited, or — when
+ // adding — the rule whose fields the new one starts from.
+ const say = isEdit ? 'Editing' : 'Copy from';
+ const lbl = $('m-trans-lbl');
+ if (lbl) lbl.textContent = say;
+ $('m-trans')?.closest?.('.custom-select')?.querySelector('.custom-select-trigger')?.setAttribute('aria-label', say);
}
export function buildTransitionPicker(transitions, selectedId) {
@@ -125,6 +133,143 @@ export function transitionSymbolChoices() {
return [...new Set([...(cfg.hasEpsilon ? [eps] : []), any, ...App.sigma, ...tapeSyms, ...markers])];
}
+/**
+ * What a reserved symbol means, for the menu that offers it. `Σ` alone in a
+ * Read menu reads as "the alphabet", which is not something a head can read;
+ * it is the wildcard. The value stays the bare symbol — only the words differ.
+ */
+function symbolMeaning(s) {
+ const { eps, any, blank, leftMarker, rightMarker } = App.config.sym;
+ if (s === eps) return 'nothing (ε-move)';
+ if (s === any) return 'any symbol';
+ if (s === blank) return 'blank cell';
+ if (s === leftMarker) return 'left end';
+ if (s === rightMarker) return 'right end';
+ return '';
+}
+
+// `bare` drops the words: the multi-tape table's columns are too narrow to
+// carry them, and says what the reserved symbols mean once, under the table.
+function symbolOptions(syms, bare = false) {
+ return syms.map(s => {
+ const say = bare ? '' : symbolMeaning(s);
+ return ``;
+ }).join('');
+}
+
+const DIR_GLYPH = { L: '←', R: '→', S: '•' };
+
+/**
+ * The strip of arrows standing in for a hidden direction select. `compact`
+ * is arrows only, named by aria-label and tooltip — a table row per tape has
+ * room for three glyphs, not three words.
+ */
+function dirSegmentHTML(selectId, compact = false) {
+ // Laid out the way the arrows point — left, stay, right — whatever order
+ // App.directions lists them in. A direction with no glyph goes last.
+ const at = d => ({ L: 0, S: 1, R: 2 })[d.value] ?? 3;
+ return [...App.directions].sort((a, b) => at(a) - at(b)).map(d => {
+ const glyph = `${escapeHtml(DIR_GLYPH[d.value] ?? d.value)}`;
+ const name = escapeHtml(d.label);
+ return ``;
+ }).join('');
+}
+
+/** Mirror a direction select's value onto its strip: checked state and roving tabindex. */
+function syncDirSegment(selectId) {
+ const sel = $(selectId);
+ const seg = sel?.parentElement?.querySelector?.('.dir-seg');
+ if (!sel || !seg) return;
+ for (const btn of seg.querySelectorAll('.dir-seg-btn')) {
+ const on = btn.dataset.dir === sel.value;
+ btn.setAttribute('aria-checked', on ? 'true' : 'false');
+ btn.tabIndex = on ? 0 : -1;
+ btn.classList.toggle('active', on);
+ }
+}
+
+function setDirFromSegment(btn, focus = false) {
+ const sel = $(btn.dataset.for);
+ if (!sel) return;
+ sel.value = btn.dataset.dir;
+ syncDirSegment(btn.dataset.for);
+ if (focus) btn.focus();
+ updateTransPreview();
+}
+
+// One set of listeners on the dialog, for every strip it will ever hold —
+// the multi-tape block is rebuilt per open, and its buttons with it.
+function bindTransModal() {
+ const modal = $('trans-modal');
+ if (!modal || modal.__transBound) return;
+ modal.__transBound = true;
+ modal.addEventListener('input', updateTransPreview);
+ modal.addEventListener('change', updateTransPreview);
+ modal.addEventListener('click', e => {
+ const btn = e.target?.closest?.('.dir-seg-btn');
+ if (btn) setDirFromSegment(btn);
+ });
+ modal.addEventListener('keydown', e => {
+ const btn = e.target?.closest?.('.dir-seg-btn');
+ if (!btn) return;
+ const step = { ArrowLeft: -1, ArrowUp: -1, ArrowRight: 1, ArrowDown: 1 }[e.key];
+ if (!step) return;
+ e.preventDefault();
+ const all = [...btn.parentElement.querySelectorAll('.dir-seg-btn')];
+ const next = all[(all.indexOf(btn) + step + all.length) % all.length];
+ setDirFromSegment(next, true);
+ });
+}
+
+/** A dialog's node for state `id`, carrying the marks the canvas would draw on it. */
+function previewNodeFor(id, x, y) {
+ const s = getState(id);
+ const n = { id, name: s?.name ?? '?', x, y, start: App.startId === id, accept: acceptsAreShown() && App.accepts.has(id) };
+ if (hasStateOutput(App.machine)) n.output = s?.output ?? '';
+ if (usesParityPriorities(App.machine) && s) n.priority = statePriority(s);
+ return n;
+}
+
+/**
+ * Draw the edge the dialog is editing as the canvas will draw it: every rule
+ * already on it, with this one in its place (or added at the end), and the
+ * reverse edge when there is one, since it is what bends this one.
+ */
+export function updateTransPreview() {
+ const svg = $('m-preview');
+ if (!svg) return;
+ let v;
+ try { v = getTransitionFormValues(); } catch { return; }
+ if (!v.from || !v.to) { svg.innerHTML = ''; return; }
+ const editId = App.transEditId;
+ const original = editId ? getTransition(editId) : null;
+ // The rule as it will be saved: the form's fields over the stored ones, so a
+ // hand-set bend or loop angle rides along while the pair is unchanged.
+ const samePair = original && original.from === v.from && original.to === v.to;
+ const draft = { ...(samePair ? original : {}), ...v, id: editId || '__draft' };
+ const ts = [];
+ let placed = false;
+ for (const t of App.transitions) {
+ if (t.from !== v.from || t.to !== v.to) continue;
+ if (t.id === editId) { placed = true; ts.push(draft); } else ts.push(t);
+ }
+ if (!placed) ts.push(draft);
+ const edges = [{ from: v.from, to: v.to, ts, focus: draft.id }];
+ if (v.from !== v.to) {
+ const back = App.transitions.filter(t => t.from === v.to && t.to === v.from && t.id !== editId);
+ if (back.length) edges.push({ from: v.to, to: v.from, ts: back, context: true });
+ }
+ const span = v.from === v.to ? 0 : previewSpan(edges);
+ const nodes = v.from === v.to
+ ? [previewNodeFor(v.from, 0, 0)]
+ : [previewNodeFor(v.from, 0, 0), previewNodeFor(v.to, span, 0)];
+ drawEditPreview(svg, { nodes, edges });
+ const fromName = getState(v.from)?.name ?? '?';
+ const toName = getState(v.to)?.name ?? '?';
+ svg.setAttribute('aria-label', `Preview: ${fromName} to ${toName} on ${transLabel(draft)}`);
+}
+
export function populateTransitionModal(t) {
const { eps, blank } = App.config.sym;
const syms = transitionSymbolChoices();
@@ -157,7 +302,7 @@ export function populateTransitionModal(t) {
const symSel = $('m-sym');
if (symSel) {
if (App.machine !== 'MTM') {
- symSel.innerHTML = syms.map(s => ``).join('');
+ symSel.innerHTML = symbolOptions(syms);
if (t?.symbol !== undefined) ensureSelectValue(symSel, t.symbol);
} else {
symSel.innerHTML = '';
@@ -193,6 +338,14 @@ export function populateTransitionModal(t) {
// (The wizard says the same thing at greater length in wizard-copy.js;
// three-word labels for a form and a sentence with a hint are different
// registers, not a duplicated fact.)
+ // A two-way automaton's head reads and moves but never writes, so its one
+ // row sits under "Head" — "Tape" over a lone Move promised a write row.
+ const tapeTitle = $('m-tape-title');
+ if (tapeTitle) tapeTitle.textContent = isReadOnlyHeadMachine(App.machine) ? 'Head' : 'Tape';
+ // Output takes a heading of its own only when a section sits above it;
+ // without one it read as the last row of the stack or the head (PDT, 2DFT).
+ const outTitle = $('m-output-title');
+ if (outTitle) outTitle.hidden = !(has('out') && (has('pop') || has('move')));
const [storeTitle, popLabel, pushLabel] = machineStoreLabels(App.machine);
if ($('m-memory-title')) $('m-memory-title').textContent = storeTitle;
if ($('m-pop-label')) $('m-pop-label').textContent = popLabel;
@@ -213,6 +366,9 @@ export function populateTransitionModal(t) {
if (dirSel) {
dirSel.innerHTML = App.directions.map(d => ``).join('');
ensureSelectValue(dirSel, t?.dir || App.directions[0].value);
+ const seg = dirSel.parentElement?.querySelector?.('.dir-seg');
+ if (seg) seg.innerHTML = dirSegmentHTML('m-dir');
+ syncDirSegment('m-dir');
}
const writeInput = $('m-write');
const writeRow = writeInput && typeof writeInput.closest === 'function' ? writeInput.closest('.modal-row') : null;
@@ -221,25 +377,38 @@ export function populateTransitionModal(t) {
if (has('tapeSyms')) {
const k = App.tapeCount;
- const dirOpts = App.directions.map(d => ``).join('');
- const symOpts = syms.map(s => ``).join('');
+ const dirOpts = App.directions.map(d => ``).join('');
+ const symOpts = symbolOptions(syms, true);
const mtmExtra = $('m-mtm-extra');
if (mtmExtra) {
- mtmExtra.innerHTML = Array.from({ length: k }, (_, i) => `
-
` : ''}`;
}
for (let i = 0; i < k; i++) {
ensureSelectValue($(`m-mtm-read-${i}`), t?.tapeSyms?.[i] ?? t?.symbol ?? blank);
const writeEl = $(`m-mtm-write-${i}`);
if (writeEl) writeEl.value = t?.tapeWrites?.[i] ?? t?.write ?? t?.symbol ?? blank;
ensureSelectValue($(`m-mtm-dir-${i}`), t?.tapeDirs?.[i] ?? t?.dir ?? App.directions[0].value);
+ syncDirSegment(`m-mtm-dir-${i}`);
}
} else {
const pdaPop = $('m-pop');
@@ -264,6 +433,7 @@ export function populateTransitionModal(t) {
const picker = $('m-trans');
if (picker && t) picker.value = t.id;
+ updateTransPreview();
}
// Reading the dialog back. Which fields to read is the same question as
@@ -377,6 +547,8 @@ export function openTransModal(from, to, opts = {}) {
// pick the column's symbol again from a list.
const symSel = $('m-sym');
if (symSel && opts.symbol !== undefined) ensureSelectValue(symSel, opts.symbol);
+ bindTransModal();
+ updateTransPreview();
showOverlay('trans-modal');
}
export function confirmTrans() {
@@ -532,7 +704,11 @@ export function saveTransition(values, editId = null) {
delete t.above;
}
if (isSingleTapeTM(App.machine)) {
- t.write = values.write;
+ // A two-way automaton's head moves but never writes, so `write` is
+ // asked of the machine rather than implied by the head: saving a 2DFA
+ // rule unchanged used to add a `write` it does not have to the file.
+ if (keeps('write')) t.write = values.write;
+ else delete t.write;
t.dir = values.dir;
} else {
delete t.write;
@@ -564,7 +740,10 @@ export function saveTransition(values, editId = null) {
if (takes('pop')) { t.pop = values.pop; t.push = values.push; }
if (takes('pop2')) { t.pop2 = values.pop2; t.push2 = values.push2; }
if (takes('below')) { t.below = values.below; t.above = values.above; }
- if (isSingleTapeTM(App.machine)) { t.write = values.write; t.dir = values.dir; }
+ if (isSingleTapeTM(App.machine)) {
+ if (takes('write')) t.write = values.write;
+ t.dir = values.dir;
+ }
if (hasTransitionOutput(App.machine)) { t.output = values.output; }
if (isWeightedFA(App.machine)) { t.weight = values.weight; }
if (isMultiTape(App.machine)) {
@@ -1011,53 +1190,107 @@ export function openStateModal(id) {
: 'Long names will overflow the node — enable "Wrap Long State Labels" in Settings → Diagram to break them at _, space or -.';
}
$('s-start').checked = isConceptualStart(id);
+ // The option, not the checkbox's parent: that used to be the switch's own
+ //