Fluksio/app
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Computed flow layout, and mobile written into the design

Browse Source 
The canvas lays itself out: a layered graph, left to right on a desktop and
top to bottom on a phone, with room reserved for the value each edge carries.
Nodes cannot be dragged and `NodeDef.position` is gone from the document —
a graph nobody can arrange is one worth keeping small, which is what keeps
flows atomic. Endpoints join the same layout, so their lanes and the
localStorage that remembered where they were dragged go too.

Mobile, per the new Responsive section of DESIGN-GUIDELINES.md: the dock caps
its width and wraps instead of running off the screen, the dashboard stacks
into one column rather than shrinking a wall panel to a fifth of its size, and
Home stops widening its grid track past the viewport. A Playwright project at
a phone's width fails the build when a screen no longer fits.

Along the way: publish is the checkmark that was already there rather than a
button that appears and disappears, with discard beside it on both the flow
and the dashboard; the brain reveals a neuron's name on the first tap; and the
port sparklines get room to breathe.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VDSXaRhvqHYNevgDGmNAto
This commit is contained in:
stroblme
2026-08-17 17:35:14 +02:00
co-authored by Claude Opus 5
parent 1c09b8209d
commit bb90a24b90
37 changed files with 998 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/tests/endpoints.spec.ts
+25 -11
View File
@@ -88,20 +88,12 @@ test("a dashboard control is drawn on the flow it feeds", async ({ page }) => {
await expect(page.getByText("Lever")).toBeVisible()
})
test("moving a node does not save the dashboard into the flow", async ({
test("the dashboard is never stored as a node of the flow", async ({
page,
}) => {
await page.goto(`/flows/${flowName}`)
const node = page.locator(".react-flow__node-flow").first()
await node.waitFor()
const box = await node.boundingBox()
if (!box) throw new Error("the node has no position to drag from")
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2)
await page.mouse.down()
await page.mouse.move(box.x + box.width / 2 + 80, box.y + box.height / 2 + 40)
await page.mouse.up()
// The autosave is debounced; give it room to land.
await page.waitForSelector(".react-flow__node")
// Long enough for an autosave to have landed if the canvas had queued one.
await page.waitForTimeout(2000)
const detail = await (await api(page, `/flows/${flowName}`)).json()
@@ -114,3 +106,25 @@ test("moving a node does not save the dashboard into the flow", async ({
"Lever",
])
})
test("a node cannot be dragged: the graph places itself", async ({ page }) => {
await page.goto(`/flows/${flowName}`)
const node = page.locator(".react-flow__node-flow").first()
await node.waitFor()
// React Flow writes a node's place in the graph as the transform on its
// wrapper. The screen position is no good here: dragging the canvas pans
// the viewport, which moves every node on screen without moving any of them
// in the graph — which is the whole point.
const at = () => node.evaluate((el) => (el as HTMLElement).style.transform)
const before = await at()
const box = await node.boundingBox()
if (!box) throw new Error("the node was not rendered")
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2)
await page.mouse.down()
await page.mouse.move(box.x + box.width / 2 + 80, box.y + box.height / 2 + 40)
await page.mouse.up()
expect(await at()).toBe(before)
})