/** * A node's height against the ports it has to fit. * * Run: `bun src/components/Flow/layout.check.ts` (there is no unit runner; the * suite in `tests/` drives a running stack). Typechecked with the rest of * `src` and imported by nothing, so it is not in the bundle. */ import assert from "node:assert/strict" import { layoutGraph, nodeHeight, PORT_SPAN } from "./layout" /** Handles are 12px across — see `.react-flow__handle` in `flow.css`. */ const HANDLE = 12 // Two ports fit the plain box, so most nodes are unchanged. assert.equal(nodeHeight(0), 56) assert.equal(nodeHeight(1), 56) assert.equal(nodeHeight(2), 56) assert.ok(nodeHeight(3) > 56) for (let ports = 2; ports <= 12; ports += 1) { const height = nodeHeight(ports) // `handleOffset` spreads the ports over `PORT_SPAN` of the edge, so that is // the room they actually get. Two handles must not touch. const between = (PORT_SPAN * height) / (ports - 1) assert.ok( between > HANDLE, `${ports} ports on a ${height}px node leave ${between}px between handles`, ) // Growing, never shrinking: one more port can only need more room. assert.ok(height >= nodeHeight(ports - 1)) } // The layout places top-left corners, so a taller node has to be lifted by its // own half-height rather than by the default box's. const tall = nodeHeight(8) const placed = layoutGraph( ["a", "b"], [{ source: "a", target: "b" }], "LR", new Map([["b", tall]]), ) const a = placed.get("a") const b = placed.get("b") assert.ok(a && b) // Dagre centres the two on one rank line, so the taller one starts higher up // by exactly the difference in half-heights. assert.equal(Math.round(a.y - b.y), Math.round((tall - 56) / 2)) console.log("layout: ok")