Skip to content

Add a quick-add bar: build graphs from plain sentences with / - #6

Merged
clioo merged 1 commit into
clioo:mainfrom
rashidazarang:quick-add
Aug 6, 2026
Merged

clioo merged 1 commit into
clioo:mainfrom
rashidazarang:quick-add

Conversation

@rashidazarang

Copy link
Copy Markdown
Contributor

What

Press / anywhere on the canvas and a small bar opens. Type one plain sentence, press Enter, and it becomes a step:

  • titled from the sentence (first letter capitalized; past 48 chars it truncates with … and keeps the full text as the description),
  • placed in free space (one column right of the selected step — 286px, the example graph's rhythm — or at the viewport center when nothing is selected, bumping down in 96px rows until the spot is free),
  • wired after the selected step (source-right → target-left),
  • selected, so the next Enter chains off it.

sentence ⏎ sentence ⏎ sentence ⏎ sketches a whole workflow without touching the mouse. Esc closes, Shift+Enter inserts a newline, and the bar stays out of the way of toasts. The gesture follows the existing shortcut conventions (ignored while typing in inputs, registered in the same onKey handler as ⌘N/⌘D/etc.).

Design choices

  • One store action, one undo step. quickAddStep(text, fallback) commits the node and its wire in a single commit, so one ⌘Z removes both — no half-added state.
  • The store stays presentation-free: the caller passes the fallback position (App computes the viewport center via screenToFlowPosition), so the action is fully unit-testable.
  • The idea is borrowed from how "get-shit-done"-style workflow tools accept a messy sentence and structure it for you, instead of asking the human to fill a form first. Humans brain-dump; the canvas does the tidying.

Tests

  • Wired path: title casing, column placement, edge created, selection moved, exactly one history entry, undo removes node+edge together.
  • Unwired path: fallback placement, collision bump on the second add, long-sentence truncation + description carry, no edges created.
  • Blank input is a no-op (no history entry).
npm test          # 31 passed + 7 companion (no new failures)
npm run build     # clean

Note: the two storage-failure tests in store.test.ts fail on main before this branch — that's #3, independent of this change.

Press / anywhere on the canvas: a small bar opens above the toast area.
Type one plain sentence, press Enter, and it becomes a step — titled
from the sentence (capitalized, truncated past 48 chars with the full
text kept as the description), placed in free space, wired after the
selected step, and selected — so Enter, sentence, Enter chains a whole
workflow without touching the mouse. Esc closes; Shift+Enter makes a
newline.

The heavy lifting is one store action, quickAddStep(text, fallback):

- With a workflow step selected it places the new step one column to the
  right (286px, the example graph's rhythm) and connects
  source-right → target-left. With nothing selected it lands at the
  fallback (the viewport center, provided by the caller).
- Either way it bumps downward in 96px rows until the spot is free, so
  rapid-fire steps never stack on top of each other.
- Node and wire land in a single commit — one undo step removes both.
- The new step becomes the selection, which is what makes chaining work.

The gesture is inspired by how the get-shit-done workflow tools accept a
messy sentence and structure it for you, instead of asking the human to
fill in a form first.

Note: the two storage failure tests in store.test.ts fail on main before
this change (see the separate fix PR); no new failures are introduced.
@clioo
clioo merged commit 9d98e5c into clioo:main Aug 6, 2026
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants