Tidy up
The tidy up button of the controls, or ⇧L, lays the nodes out in layers along their edges: each node after the nodes its edges come from, the nodes of a layer ordered to cross as few edges as it can, and each one level with its neighbours.
<.canvas id="flow" graph={@graph} layout={:down}>layout is the way of the layers: :right (the default, as a workflow
reads) or :down (as an org chart does).
- With two or more nodes selected, it lays out those, and the others stay.
- A group is laid out as one box, with what is in it; locked nodes stay.
- The parts of a canvas that no edge joins are laid out apart, side by side.
- The nodes glide to their places (at once with reduced motion), and keep the top left corner they had.
The new places are one :move change, as a drag's: the server checks it,
on_change saves it, everyone on a shared canvas sees it, and ⌘Z undoes
it in one step.
The app can tidy up too, from the canvas's LiveView:
Hakushi.Live.layout("flow", direction: :down)The layout runs in the person's browser, which knows the size of each node as it is drawn.
Export
The download button of the controls saves the canvas as a PNG: every node
and edge, not only those on the screen, at twice its size, on the paper's
colour. export={false} takes the button away.
From the LiveView, in the person's browser:
Hakushi.Live.export("flow", format: :svg, filename: "invoice-flow")And from your own JavaScript, as a Blob:
import { canvasOf } from "hakushi"
const blob = await canvasOf(document.getElementById("flow")).exportImage({ format: "png", scale: 2, padding: 32, transparent: false })The image is the nodes as the page draws them (your HEEx, with the page's style sheets) and the edges, without the handles. Fonts of the page's own origin are put in the image; a font, a style sheet or an image of another origin may not be, and a browser that will not draw such an image to a PNG gives the SVG instead (see Known limits).