Let the canvas endpoints be moved, and lift them on hover
Three things they were missing: they could not be dragged out of the lane they were placed in, they stayed the same weight whether or not you were reaching for one, and the label sat right against its connector dot. Where one has been dragged to is a view preference, not part of the flow — writing a position for a dashboard widget into flow.json would be a lie about what the document holds — so it lives in the browser, keyed by flow. Also folds the dashboard shot into `make verify` and drops the one-off scripts that had accumulated beside it; the durable coverage is the Playwright specs, which all pass. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011LF61rxW1FG5YCD2J9YqjY
This commit is contained in:
Claude Fable 5
+29
-32
@@ -22,12 +22,29 @@ Deferring because out of scope is fine, but don't mention deferring than.
|
||||
- BUG/UI: clicking outside the panel does not discard the flow edit panel
|
||||
- FEAT/UX: for the same type of node show suggestions in the setting fields based on other nodes; I.e. if I create an mqtt node and I already configured one in another flow, allow selecting the values of the exiting mqtt node as a drop-down option (identical to consumables) when clicking inside the corresponding field in the new node (same for all other nodes)
|
||||
- BUG/UI: the graph showed in the node edit panel should also be shown for a specific edge inside the pop-up panel when clicking the edge
|
||||
- PERF/FLOW: every save rebuilds the whole pipeline. Fine at the current flow count; rebuild
|
||||
only the touched flow when it starts to show.
|
||||
- FEAT/UI: the chart widget is stored and validated but not drawn — it is filtered out of
|
||||
the editor's add row. Needs a charting library and the `--chart-*` tokens below.
|
||||
- FEAT/UI: dashboard widgets are sized with a wider/narrower control rather than dragged.
|
||||
A grid library would give drag-and-resize and per-breakpoint layouts; the document
|
||||
already stores layout per breakpoint, so only the editor changes.
|
||||
- FEAT/UI/MOBILE: dashboards render in the padded admin shell, so a wall panel gets the
|
||||
sidebar, footer and a `max-w-7xl` column. A full-bleed shell would suit a panel better.
|
||||
- FEAT/UI: reintroduce `--chart-*` tokens as one designed sequential scale when the first
|
||||
chart lands. The node sparkline draws one series in `--primary` and needs none.
|
||||
- FEAT/FLOW: single-stepping a paused flow. The work queue it needed now exists: pausing
|
||||
parks claimed items per flow and resuming drains them, so a step button is a matter of
|
||||
popping one parked item instead of all of them.
|
||||
- FEAT/UI: interrupting a node that is already running. Pause holds nodes that have not been
|
||||
submitted yet; one already executing runs to completion.
|
||||
- FEAT/UI: flow-level edits (title, inputs) go through `FlowPanel.onChange` and stay outside
|
||||
the undo stack.
|
||||
- BUG/UI: the enlarged panel (for code editing) should still maintain its floating style
|
||||
- FEAT/UI: no screen for alerting. Channels and rules are API-only (`/alerts/config`),
|
||||
so setting up a phone notification means calling the endpoint by hand.
|
||||
- FEAT/UI: there is no screen for managing the secrets store itself. A node parameter marked
|
||||
`x-secret` offers the stored secrets, but they can only be created through the API. We should introduce ad dedicated page (in the sidebar) to handle secrets in a centralized way
|
||||
- BUG/UI: `SidePanel`'s mobile branch does not set `data-testid` on the `SheetContent`, so
|
||||
`[data-testid=node-panel]` does not exist on a phone. Mobile specs cannot address the panel.
|
||||
- CHORE/API: node source saves carry no version precondition, so two clients editing the same
|
||||
@@ -43,18 +60,12 @@ Deferring because out of scope is fine, but don't mention deferring than.
|
||||
- CHORE/INFRA: `requires-python` is capped below 3.14 because the MCP SDK wants a newer
|
||||
starlette there than the pinned `sentry-sdk<2` allows. Lift the cap when sentry-sdk moves
|
||||
to 2.x.
|
||||
- FEAT/UI: no screen for alerting. Channels and rules are API-only (`/alerts/config`),
|
||||
so setting up a phone notification means calling the endpoint by hand.
|
||||
- FEAT/UI: there is no screen for managing the secrets store itself. A node parameter marked
|
||||
`x-secret` offers the stored secrets, but they can only be created through the API.
|
||||
- FEAT/FLOW: input discretization drops the trailing edge — if a producer goes quiet inside
|
||||
the window, the consumer never sees the last value. Delivering it at the end of the window
|
||||
needs a timer per (node, port).
|
||||
- CHORE/FLOW: shared node sources bypass the draft/publish split. Editing one writes the
|
||||
library copy and reloads immediately, since the code is not any single flow's to hold back.
|
||||
Deliberate, but it means a shared node is the one thing publish does not gate.
|
||||
- FEAT/UI: flow-level edits (title, inputs) go through `FlowPanel.onChange` and stay outside
|
||||
the undo stack.
|
||||
- CHORE/UI: `make test-backend` cannot reach Postgres while the integrated stack is up —
|
||||
`compose.local.yml` does `db: ports: !reset []`. Run it against the container's address, or
|
||||
move the suite inside the compose network.
|
||||
@@ -68,26 +79,12 @@ Deferring because out of scope is fine, but don't mention deferring than.
|
||||
- CHORE/INFRA: `test-backend.yml` runs pytest on the runner host, so it keeps the fixed
|
||||
container name and port 5432 that `compose.ci.yml` resets everywhere else. Two concurrent
|
||||
runs of that one job collide.
|
||||
- PERF/UI: (deferred for now) the Monaco chunk is 2.6 MB. It only loads when a node panel opens, but the
|
||||
editor could be trimmed further or swapped for CodeMirror if that becomes a problem.
|
||||
- CHORE/FLOW: four modules of `app/flow/nodes/` are still excluded from strict mypy
|
||||
(`[[tool.mypy.overrides]]` in `pyproject.toml`): `mqtt`, `http`, `influx` and `delay`. They
|
||||
carry prototype typing, `croniter` ships no stubs and `influxdb_client` does not re-export
|
||||
its names. `base` and `mlp` are checked; shrink the rest as each integration is revisited.
|
||||
- FEAT/UI: an endpoint's edge routes straight across the graph, so it can pass behind a
|
||||
node that sits between the lane and the node it wires to. Readable, but a routed edge
|
||||
would be tidier.
|
||||
- CHORE/FLOW: a node function returning something other than a dict raises `AttributeError`
|
||||
in `Node._to_messages` rather than a named error. Outputs are keyed by port, so a non-dict
|
||||
cannot be one — say so where the return value is mapped.
|
||||
- PERF/FLOW: every save rebuilds the whole pipeline. Fine at the current flow count; rebuild
|
||||
only the touched flow when it starts to show.
|
||||
- FEAT/UI: the chart widget is stored and validated but not drawn — it is filtered out of
|
||||
the editor's add row. Needs a charting library and the `--chart-*` tokens below.
|
||||
- FEAT/UI: dashboard widgets are sized with a wider/narrower control rather than dragged.
|
||||
A grid library would give drag-and-resize and per-breakpoint layouts; the document
|
||||
already stores layout per breakpoint, so only the editor changes.
|
||||
- FEAT/UI/MOBILE: dashboards render in the padded admin shell, so a wall panel gets the
|
||||
sidebar, footer and a `max-w-7xl` column. A full-bleed shell would suit a panel better.
|
||||
- FEAT/UI: reintroduce `--chart-*` tokens as one designed sequential scale when the first
|
||||
chart lands. The node sparkline draws one series in `--primary` and needs none.
|
||||
- PERF/UI: the app's entry chunk is 680 kB (210 kB gzipped) and exceeds the warning
|
||||
threshold. React Flow and Monaco are already lazy; a manualChunks split measured no better,
|
||||
so this needs route-level work on the shell rather than chunking config.
|
||||
@@ -95,23 +92,23 @@ Deferring because out of scope is fine, but don't mention deferring than.
|
||||
- CHORE/INFRA: `bun run --filter frontend build` fails on this workspace with
|
||||
`crypto.hash is not a function` — Vite 7 wants Node 20.12+ and the host has 18. The
|
||||
Docker image builds fine, so it only bites local bundling; `bunx tsc` still type-checks.
|
||||
- PERF/UI: (deferred for now) the Monaco chunk is 2.6 MB. It only loads when a node panel opens, but the
|
||||
editor could be trimmed further or swapped for CodeMirror if that becomes a problem.
|
||||
- CHORE/FLOW: four modules of `app/flow/nodes/` are still excluded from strict mypy
|
||||
(`[[tool.mypy.overrides]]` in `pyproject.toml`): `mqtt`, `http`, `influx` and `delay`. They
|
||||
carry prototype typing, `croniter` ships no stubs and `influxdb_client` does not re-export
|
||||
its names. `base` and `mlp` are checked; shrink the rest as each integration is revisited.
|
||||
|
||||
- FEAT/NODE: the connectors only read. Enable the write paths with someone watching:
|
||||
WF-RAC `setAirconStat` (needs an operatorId registered with the unit first, which is
|
||||
itself a write) and Art-Net `transmit`.
|
||||
- FEAT/NODE: the second WF-RAC unit (the one Node-RED addresses with operatorId "0")
|
||||
closes the connection on an anonymous read. It likely wants an account registered;
|
||||
the first unit answers without one.
|
||||
- CHORE/NODE: `wfrac` reports `mode` as "unknown" while the unit is off, because the
|
||||
mode bits hold a value outside the known set. Faithful to the reference decoder, but
|
||||
"off" would read better.
|
||||
|
||||
- FEAT/UI: an endpoint's edge routes straight across the graph, so it can pass behind a
|
||||
node that sits between the lane and the node it wires to. Readable, but a routed edge
|
||||
would be tidier.
|
||||
- FEAT/UI: endpoints are always shown. A flow read by a twenty-tile wall panel gets twenty
|
||||
labels, and only the input ones affect the graph — dimming or collapsing consumers is
|
||||
the obvious next move if it turns out busy.
|
||||
- FEAT/NODE: the second WF-RAC unit (the one Node-RED addresses with operatorId "0")
|
||||
closes the connection on an anonymous read. It likely wants an account registered;
|
||||
the first unit answers without one.
|
||||
|
||||
## Blocked
|
||||
|
||||
|
||||
@@ -62,15 +62,40 @@ for (const theme of ["light", "dark"]) {
|
||||
await page.screenshot({ path: `${dir}/app-dashboard.png` })
|
||||
|
||||
await captureFlows(page, dir)
|
||||
await captureDashboards(page, dir)
|
||||
|
||||
await context.close()
|
||||
console.log(
|
||||
` wrote ${dir}/{website-hero,app-login,app-dashboard,app-flows,app-flow-panel}.png`,
|
||||
` wrote ${dir}/{website-hero,app-login,app-dashboard,app-flows,app-flow-panel,app-panel}.png`,
|
||||
)
|
||||
}
|
||||
|
||||
await browser.close()
|
||||
|
||||
/**
|
||||
* A dashboard as a wall panel sees it. Seeds one if the instance has none, so
|
||||
* the shot shows the grid rather than an empty-state message.
|
||||
*/
|
||||
async function captureDashboards(page, dir) {
|
||||
await page.goto(`${APP_URL}/dashboards`, { waitUntil: "networkidle" })
|
||||
|
||||
if (!(await page.getByTestId("dashboard-card").count())) {
|
||||
await page.getByTestId("new-dashboard-name").fill("panel")
|
||||
await page.getByTestId("create-dashboard").click()
|
||||
await page.waitForURL(/\/dashboards\/.+/, { timeout: 15000 })
|
||||
// A widget, so the grid has something in it worth photographing.
|
||||
await page.getByTestId("add-widget-stat").click()
|
||||
await page.waitForSelector("[data-testid=widget-settings]")
|
||||
await page.getByTestId("toggle-edit").click()
|
||||
} else {
|
||||
await page.getByTestId("dashboard-card").first().click()
|
||||
await page.waitForURL(/\/dashboards\/.+/, { timeout: 15000 })
|
||||
}
|
||||
|
||||
await page.waitForTimeout(1500)
|
||||
await page.screenshot({ path: `${dir}/app-panel.png` })
|
||||
}
|
||||
|
||||
/**
|
||||
* The flow editor, empty-handed if the instance has no flows yet: seeds one
|
||||
* with a node so the canvas and the node panel are both worth looking at.
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
/** Feature check: build a dashboard, read a live value, move a control. */
|
||||
import { mkdir } from "node:fs/promises"
|
||||
import { chromium } from "@playwright/test"
|
||||
|
||||
const APP_URL = process.env.APP_URL || "http://app.localhost"
|
||||
const EMAIL = process.env.FIRST_SUPERUSER
|
||||
const PASSWORD = process.env.FIRST_SUPERUSER_PASSWORD
|
||||
const OUT = process.env.SCREENSHOT_DIR || "screenshots"
|
||||
const NAME = process.env.DASHBOARD_NAME || "house"
|
||||
|
||||
const browser = await chromium.launch()
|
||||
for (const theme of ["light", "dark"]) {
|
||||
const dir = `${OUT}/${theme}`
|
||||
await mkdir(dir, { recursive: true })
|
||||
const context = await browser.newContext({
|
||||
viewport: { width: 1440, height: 900 },
|
||||
colorScheme: theme,
|
||||
})
|
||||
await context.addInitScript((t) => {
|
||||
localStorage.setItem("fluksio-ui-theme", t)
|
||||
}, theme)
|
||||
const page = await context.newPage()
|
||||
|
||||
await page.goto(`${APP_URL}/login`, { waitUntil: "networkidle" })
|
||||
await page.getByTestId("email-input").fill(EMAIL)
|
||||
await page.getByTestId("password-input").fill(PASSWORD)
|
||||
await page.getByRole("button", { name: /log in/i }).click()
|
||||
await page.waitForURL(`${APP_URL}/`, { timeout: 15000 })
|
||||
|
||||
await page.goto(`${APP_URL}/dashboards`, { waitUntil: "networkidle" })
|
||||
|
||||
// Light builds it; dark just looks at what light left behind.
|
||||
if (theme === "light") {
|
||||
await page.getByTestId("new-dashboard-name").fill(NAME)
|
||||
await page.getByTestId("create-dashboard").click()
|
||||
await page.waitForURL(/\/dashboards\/.+/, { timeout: 15000 })
|
||||
|
||||
// A reading, a dial and a control over the same message.
|
||||
for (const [kind, message] of [
|
||||
["stat", "heating.applied"],
|
||||
["gauge", "heating.setpoint"],
|
||||
["slider", "heating.setpoint"],
|
||||
]) {
|
||||
await page.getByTestId(`add-widget-${kind}`).click()
|
||||
await page.waitForSelector("[data-testid=widget-settings]")
|
||||
await page.getByTestId("widget-message").click()
|
||||
await page.getByRole("option", { name: message }).click()
|
||||
await page.waitForTimeout(400)
|
||||
}
|
||||
await page.waitForTimeout(1500) // let the autosave land
|
||||
} else {
|
||||
await page.getByTestId("dashboard-card").first().click()
|
||||
await page.waitForURL(/\/dashboards\/.+/, { timeout: 15000 })
|
||||
}
|
||||
|
||||
// View mode is what a panel shows.
|
||||
const done = page.getByTestId("toggle-edit")
|
||||
if ((await done.textContent())?.includes("Done")) await done.click()
|
||||
await page.waitForTimeout(1200)
|
||||
await page.screenshot({ path: `${dir}/app-dashboard-view.png` })
|
||||
|
||||
if (theme === "light") {
|
||||
// Move the slider and confirm the value actually reached the engine.
|
||||
const slider = page.locator('input[type="range"]').first()
|
||||
await slider.click()
|
||||
await slider.press("ArrowRight")
|
||||
await page.waitForTimeout(1500)
|
||||
await page.screenshot({ path: `${dir}/app-dashboard-control.png` })
|
||||
|
||||
await page.getByTestId("toggle-edit").click()
|
||||
await page.waitForTimeout(1000)
|
||||
await page.screenshot({ path: `${dir}/app-dashboard-edit.png` })
|
||||
}
|
||||
|
||||
console.log(` ${theme}: done`)
|
||||
await context.close()
|
||||
}
|
||||
await browser.close()
|
||||
@@ -1,82 +0,0 @@
|
||||
/** The reported bug, end to end: move the real slider, watch the canvas. */
|
||||
import { mkdir } from "node:fs/promises"
|
||||
import { chromium } from "@playwright/test"
|
||||
|
||||
const APP_URL = process.env.APP_URL || "http://app.localhost"
|
||||
const OUT = process.env.SCREENSHOT_DIR || "screenshots"
|
||||
const browser = await chromium.launch()
|
||||
|
||||
async function login(page) {
|
||||
await page.goto(`${APP_URL}/login`, { waitUntil: "networkidle" })
|
||||
await page.getByTestId("email-input").fill(process.env.FIRST_SUPERUSER)
|
||||
await page
|
||||
.getByTestId("password-input")
|
||||
.fill(process.env.FIRST_SUPERUSER_PASSWORD)
|
||||
await page.getByRole("button", { name: /log in/i }).click()
|
||||
await page.waitForURL(`${APP_URL}/`, { timeout: 15000 })
|
||||
}
|
||||
|
||||
for (const theme of ["light", "dark"]) {
|
||||
const dir = `${OUT}/${theme}`
|
||||
await mkdir(dir, { recursive: true })
|
||||
const context = await browser.newContext({
|
||||
viewport: { width: 1440, height: 900 },
|
||||
colorScheme: theme,
|
||||
})
|
||||
await context.addInitScript((t) => {
|
||||
localStorage.setItem("fluksio-ui-theme", t)
|
||||
}, theme)
|
||||
const page = await context.newPage()
|
||||
await login(page)
|
||||
|
||||
await page.goto(`${APP_URL}/flows/probe`, { waitUntil: "networkidle" })
|
||||
await page.keyboard.press("Escape")
|
||||
await page.waitForTimeout(2000)
|
||||
await page.screenshot({ path: `${dir}/endpoints-canvas.png` })
|
||||
|
||||
if (theme === "light") {
|
||||
// Watch the canvas while a second tab moves the real slider.
|
||||
const watch = page.evaluate(async () => {
|
||||
const seen = new Set()
|
||||
const scan = () => {
|
||||
for (const el of document.querySelectorAll(".edge-live")) {
|
||||
const holder = el.closest("[data-id]")
|
||||
if (holder) seen.add(holder.getAttribute("data-id"))
|
||||
}
|
||||
}
|
||||
const observer = new MutationObserver(scan)
|
||||
observer.observe(document.body, {
|
||||
attributes: true,
|
||||
subtree: true,
|
||||
attributeFilter: ["class"],
|
||||
})
|
||||
await new Promise((r) => setTimeout(r, 6000))
|
||||
observer.disconnect()
|
||||
return [...seen]
|
||||
})
|
||||
|
||||
const other = await context.newPage()
|
||||
await other.goto(`${APP_URL}/dashboards/probe`, {
|
||||
waitUntil: "networkidle",
|
||||
})
|
||||
await other.waitForTimeout(1200)
|
||||
const slider = other.locator('input[type="range"]').first()
|
||||
await slider.click()
|
||||
for (let i = 0; i < 3; i++) {
|
||||
await slider.press("ArrowRight")
|
||||
await other.waitForTimeout(700)
|
||||
}
|
||||
const pulsed = await watch
|
||||
console.log(
|
||||
" edges that pulsed while the slider moved:",
|
||||
JSON.stringify(pulsed),
|
||||
)
|
||||
await other.close()
|
||||
await page.waitForTimeout(500)
|
||||
await page.screenshot({ path: `${dir}/endpoints-after-slider.png` })
|
||||
}
|
||||
|
||||
console.log(` ${theme}: done`)
|
||||
await context.close()
|
||||
}
|
||||
await browser.close()
|
||||
@@ -1,41 +0,0 @@
|
||||
/** Screenshot the dashboard and the flow canvas as a user will find them. */
|
||||
import { mkdir } from "node:fs/promises"
|
||||
import { chromium } from "@playwright/test"
|
||||
|
||||
const APP_URL = process.env.APP_URL || "http://app.localhost"
|
||||
const OUT = process.env.SCREENSHOT_DIR || "screenshots"
|
||||
const browser = await chromium.launch()
|
||||
|
||||
for (const theme of ["light", "dark"]) {
|
||||
const dir = `${OUT}/${theme}`
|
||||
await mkdir(dir, { recursive: true })
|
||||
const context = await browser.newContext({
|
||||
viewport: { width: 1440, height: 900 },
|
||||
colorScheme: theme,
|
||||
})
|
||||
await context.addInitScript((t) => {
|
||||
localStorage.setItem("fluksio-ui-theme", t)
|
||||
}, theme)
|
||||
const page = await context.newPage()
|
||||
|
||||
await page.goto(`${APP_URL}/login`, { waitUntil: "networkidle" })
|
||||
await page.getByTestId("email-input").fill(process.env.FIRST_SUPERUSER)
|
||||
await page
|
||||
.getByTestId("password-input")
|
||||
.fill(process.env.FIRST_SUPERUSER_PASSWORD)
|
||||
await page.getByRole("button", { name: /log in/i }).click()
|
||||
await page.waitForURL(`${APP_URL}/`, { timeout: 15000 })
|
||||
|
||||
await page.goto(`${APP_URL}/dashboards/aircon`, { waitUntil: "networkidle" })
|
||||
await page.waitForTimeout(2500)
|
||||
await page.screenshot({ path: `${dir}/live-dashboard.png` })
|
||||
|
||||
await page.goto(`${APP_URL}/flows/aircon`, { waitUntil: "networkidle" })
|
||||
await page.keyboard.press("Escape")
|
||||
await page.waitForTimeout(2500)
|
||||
await page.screenshot({ path: `${dir}/live-flow.png` })
|
||||
|
||||
console.log(` ${theme}: done`)
|
||||
await context.close()
|
||||
}
|
||||
await browser.close()
|
||||
@@ -1,72 +0,0 @@
|
||||
/** Feature check: the free-form settings editor on a function node. */
|
||||
import { mkdir } from "node:fs/promises"
|
||||
import { chromium } from "@playwright/test"
|
||||
|
||||
const APP_URL = process.env.APP_URL || "http://app.localhost"
|
||||
const EMAIL = process.env.FIRST_SUPERUSER
|
||||
const PASSWORD = process.env.FIRST_SUPERUSER_PASSWORD
|
||||
const OUT = process.env.SCREENSHOT_DIR || "screenshots"
|
||||
|
||||
const browser = await chromium.launch()
|
||||
for (const theme of ["light", "dark"]) {
|
||||
const dir = `${OUT}/${theme}`
|
||||
await mkdir(dir, { recursive: true })
|
||||
const context = await browser.newContext({
|
||||
viewport: { width: 1440, height: 900 },
|
||||
colorScheme: theme,
|
||||
})
|
||||
await context.addInitScript((t) => {
|
||||
localStorage.setItem("fluksio-ui-theme", t)
|
||||
}, theme)
|
||||
const page = await context.newPage()
|
||||
|
||||
await page.goto(`${APP_URL}/login`, { waitUntil: "networkidle" })
|
||||
await page.getByTestId("email-input").fill(EMAIL)
|
||||
await page.getByTestId("password-input").fill(PASSWORD)
|
||||
await page.getByRole("button", { name: /log in/i }).click()
|
||||
await page.waitForURL(`${APP_URL}/`, { timeout: 15000 })
|
||||
|
||||
await page.goto(`${APP_URL}/flows`, { waitUntil: "networkidle" })
|
||||
const seed = page.getByTestId("create-first-flow")
|
||||
if (await seed.count()) {
|
||||
await seed.click()
|
||||
await page.waitForURL(/\/flows\/.+/, { timeout: 15000 })
|
||||
}
|
||||
if (!(await page.locator(".react-flow__node").count())) {
|
||||
await page.getByTestId("add-node").click()
|
||||
await page
|
||||
.getByRole("option", { name: /function/i })
|
||||
.first()
|
||||
.click()
|
||||
await page.waitForSelector(".react-flow__node")
|
||||
}
|
||||
await page.locator(".react-flow__node").first().click()
|
||||
await page.waitForSelector("[data-testid=node-panel]", { timeout: 15000 })
|
||||
|
||||
// Add two settings and give them values.
|
||||
await page.getByTestId("add-param").click()
|
||||
await page.waitForTimeout(300)
|
||||
const names = page.getByLabel("Setting name")
|
||||
const values = page.getByLabel("Setting value")
|
||||
await names.first().fill("threshold")
|
||||
await names.first().blur()
|
||||
await page.waitForTimeout(200)
|
||||
await page.getByLabel("Type").first().click()
|
||||
await page.getByRole("option", { name: "number" }).click()
|
||||
await page.waitForTimeout(200)
|
||||
await values.first().fill("21.5")
|
||||
await page.waitForTimeout(200)
|
||||
|
||||
await page.getByTestId("add-param").click()
|
||||
await page.waitForTimeout(300)
|
||||
await names.nth(1).fill("label")
|
||||
await names.nth(1).blur()
|
||||
await page.waitForTimeout(200)
|
||||
await values.nth(1).fill("living room")
|
||||
await page.waitForTimeout(1200)
|
||||
|
||||
await page.screenshot({ path: `${dir}/app-node-params.png` })
|
||||
console.log(` wrote ${dir}/app-node-params.png`)
|
||||
await context.close()
|
||||
}
|
||||
await browser.close()
|
||||
@@ -26,7 +26,11 @@ function EndpointNodeComponent({ data, selected }: NodeProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex max-w-48 items-center gap-2 px-1 py-0.5 text-muted-foreground",
|
||||
// Padding keeps the text off the connector dot, which sits on the edge.
|
||||
"flex max-w-48 cursor-grab items-center gap-2 px-3 py-1",
|
||||
// Quiet at rest so the logic reads first; legible when reached for.
|
||||
"text-muted-foreground transition-colors",
|
||||
"hover:text-foreground active:cursor-grabbing",
|
||||
selected && "text-foreground",
|
||||
)}
|
||||
title={messages.join("\n")}
|
||||
|
||||
@@ -43,7 +43,13 @@ import { CommandPalette } from "./CommandPalette"
|
||||
import { bindingsKey, deriveEdges, portOf, qualify } from "./deriveEdges"
|
||||
import { EdgeInspector, type InspectedEdge } from "./EdgeInspector"
|
||||
import { EndpointNode } from "./EndpointNode"
|
||||
import { deriveEndpoints, ENDPOINT_TYPE, isEndpointNode } from "./endpoints"
|
||||
import {
|
||||
deriveEndpoints,
|
||||
ENDPOINT_TYPE,
|
||||
isEndpointNode,
|
||||
placementsFor,
|
||||
rememberPlacement,
|
||||
} from "./endpoints"
|
||||
import { FIT_VIEW, FlowDock } from "./FlowDock"
|
||||
import { FlowNode, type FlowNodeData } from "./FlowNode"
|
||||
import { FlowPanel } from "./FlowPanel"
|
||||
@@ -385,6 +391,12 @@ function FlowEditorInner({
|
||||
}
|
||||
}, [key])
|
||||
|
||||
// Endpoints are movable but are not the flow's to store, so where they were
|
||||
// put lives in the browser rather than in flow.json.
|
||||
const [moved, setMoved] = useState<Record<string, { x: number; y: number }>>(
|
||||
() => placementsFor(flowName),
|
||||
)
|
||||
|
||||
/** Where clicking an endpoint takes you: the thing it stands for. */
|
||||
const openEndpoint = useCallback(
|
||||
(id: string) => {
|
||||
@@ -415,8 +427,9 @@ function FlowEditorInner({
|
||||
definitions,
|
||||
flowName,
|
||||
new Map(canvasNodes.map((node) => [node.id, node.position])),
|
||||
moved,
|
||||
),
|
||||
[detail.endpoints, key, flowName],
|
||||
[detail.endpoints, key, flowName, moved],
|
||||
)
|
||||
|
||||
// Edges follow from the name bindings, so they are derived, never stored.
|
||||
@@ -727,12 +740,17 @@ function FlowEditorInner({
|
||||
nodes={shownNodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onNodeDragStop={(_event, _node, dragged) =>
|
||||
commit(
|
||||
definitions,
|
||||
mergeDragged(canvasNodes, dragged.filter(isDocumentNode)),
|
||||
)
|
||||
onNodeDragStop={(_event, _node, dragged) => {
|
||||
for (const node of dragged.filter(isEndpointNode)) {
|
||||
rememberPlacement(flowName, node.id, node.position)
|
||||
setMoved((current) => ({
|
||||
...current,
|
||||
[node.id]: node.position,
|
||||
}))
|
||||
}
|
||||
const own = dragged.filter(isDocumentNode)
|
||||
if (own.length) commit(definitions, mergeDragged(canvasNodes, own))
|
||||
}}
|
||||
onNodesDelete={(deleted) =>
|
||||
deleteNodes(deleted.filter(isDocumentNode).map((node) => node.id))
|
||||
}
|
||||
|
||||
@@ -40,6 +40,45 @@ export function isEndpointNode(node: { id: string }): boolean {
|
||||
return node.id.startsWith("dashboard:") || node.id.startsWith("flow:")
|
||||
}
|
||||
|
||||
/**
|
||||
* Where the author dragged an endpoint to.
|
||||
*
|
||||
* Not in the flow document — an endpoint is not part of the flow, and writing
|
||||
* a position for one into `flow.json` would be a lie about what it contains.
|
||||
* A view preference belongs to the view, so it lives in the browser.
|
||||
*/
|
||||
const POSITION_KEY = "fluksio-endpoint-positions"
|
||||
|
||||
type Placements = Record<string, Record<string, { x: number; y: number }>>
|
||||
|
||||
function readPlacements(): Placements {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(POSITION_KEY) ?? "{}") as Placements
|
||||
} catch {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
|
||||
export function placementsFor(
|
||||
flow: string,
|
||||
): Record<string, { x: number; y: number }> {
|
||||
return readPlacements()[flow] ?? {}
|
||||
}
|
||||
|
||||
export function rememberPlacement(
|
||||
flow: string,
|
||||
id: string,
|
||||
position: { x: number; y: number },
|
||||
): void {
|
||||
const all = readPlacements()
|
||||
all[flow] = { ...(all[flow] ?? {}), [id]: position }
|
||||
try {
|
||||
localStorage.setItem(POSITION_KEY, JSON.stringify(all))
|
||||
} catch {
|
||||
// A full or disabled store just means positions reset; not worth failing.
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Place the endpoints and wire them to the nodes they touch.
|
||||
*
|
||||
@@ -53,6 +92,7 @@ export function deriveEndpoints(
|
||||
definitions: NodeDef_Input[],
|
||||
flow: string,
|
||||
positions: Map<string, { x: number; y: number }>,
|
||||
moved: Record<string, { x: number; y: number }> = {},
|
||||
): { nodes: FlowCanvasNode[]; edges: Edge[] } {
|
||||
if (endpoints.length === 0) return { nodes: [], edges: [] }
|
||||
|
||||
@@ -104,12 +144,12 @@ export function deriveEndpoints(
|
||||
nodes.push({
|
||||
id: endpoint.id,
|
||||
type: ENDPOINT_TYPE,
|
||||
position: {
|
||||
position: moved[endpoint.id] ?? {
|
||||
x: side === "left" ? bounds.left - GAP_X : bounds.right + GAP_X,
|
||||
y: bounds.top + index * STACK_Y,
|
||||
},
|
||||
// Not part of the document, and not the author's to rearrange.
|
||||
draggable: false,
|
||||
// Movable, so a canvas can be arranged; still not the flow's to delete.
|
||||
draggable: true,
|
||||
selectable: true,
|
||||
deletable: false,
|
||||
data: {
|
||||
|
||||
Reference in New Issue
Block a user