Components and hooks

What Flowinger exports, and what each piece is for. Props are in the API reference.

FlowingerCanvas	The whole canvas, every feature: pan by dragging, zoom with the wheel or a pinch, drag nodes if you allow it. Also ReactFlow.
FlowingerCore	The same canvas with only the features you name — pan, zoom, nodes and edges are always there. Takes id and a domAttributes escape hatch for its own element (never an event handler, or id/style/className/children/role/tabIndex, which are the engine’s own).
FlowingerProvider	Optional: owns the state, so a toolbar outside the canvas can drive it. The canvas makes its own when there is none.
Handle	A connection point on a node. Edges attach to the handle they name, wherever it is drawn.
BaseEdge	How every built-in edge is drawn (a path, an optional label). A custom edge can render it and add to it.
ViewportPortal	Draws your own elements in graph space — they pan and zoom with the diagram and sit above its nodes and edge labels. Renders nothing on the server.
EdgeLabelRenderer	Inside a custom edge: draws HTML (a button, an input) at a point of the edge, in a layer above the edges that pans and zooms with the graph. Position it with a translate(x, y) from the edge’s own label coordinates; give it pointerEvents: 'all' and a nopan class to make it clickable.
NodeToolbar	Inside a node: buttons attached to a side of it (position, align, offset), shown while it is the only thing selected (isVisible overrides). It rides on the node, so it follows drags and zoom and never changes the node’s size. nodeId names another node, or several, and the toolbar is drawn at them in graph space, following them; shown by default while the one it names is the only thing selected.
NodeResizer	Inside a node: eight drag handles (sides and corners) that resize it — minWidth, minHeight, maxWidth, maxHeight, keepAspectRatio, isVisible, color, shouldResize, onResizeStart / onResize / onResizeEnd. Also nodeId (resize a node other than the one it is drawn in), autoScale (handles are drawn larger by 1 / zoom below zoom 1 so they stay within reach; default true, as in React Flow) and handleClassName / handleStyle / lineClassName / lineStyle. Reported as dimensions (written to width/height) and position changes, so it needs a controlled flow or defaultNodes.
NodeResizeControl	One resize control, where you want it: position (a side or corner; default 'bottom-right'), variant ('handle', or 'line' along a side), children drawn inside it (an icon), and the same limits and callbacks as NodeResizer. NodeResizer is eight of them.
Panel	A box of your own UI pinned to the canvas — position is top-left (default), top-center, top-right, center-left, center-right, bottom-left, bottom-center or bottom-right. A press on it does not pan, and a click on it is not a pane click.
Background, Controls	A dot/line/cross backdrop (size is a dot’s diameter or a cross’s arm length, lineWidth a stroke’s, bgColor behind the pattern — as in React Flow); zoom and fit buttons (showZoom, showFit/showFitView, fitViewOptions, onZoomIn/onZoomOut/onFitView, your own ControlButtons as children). Both go inside the provider; a position pins either to the canvas, as Panel does. showInteractive adds a lock button that switches nodes being dragged, connected and selected off and on, over the canvas’s props (onInteractiveChange(interactive)); off by default, unlike React Flow.
MiniMap	An overview of the whole graph with the visible region cut out of a dimming mask. Click or drag on it to move the view; it holds still during a drag. Props: width, height, nodeColor/nodeStrokeColor/nodeClassName (a value or a function of the node), nodeStrokeWidth, nodeBorderRadius, maskColor, maskStrokeColor/maskStrokeWidth, bgColor, pannable, position, ariaLabel, and nodeComponent (draw each node yourself, given its box, colours and class — MiniMapNode is the default), onNodeClick(event, node) (a press on a node that does not become a drag), zoomable / zoomStep (the wheel over the overview zooms the canvas about its centre; zoomStep defaults to 10 as in React Flow) and offsetScale (the margin round what is shown, in pixels of the overview). inversePan drags the other way: the view goes as far the other side of where the press began as the pointer is on this one. Goes inside the provider, next to the canvas or inside it.
useFlowinger(), useViewport(), useOnViewportChange(), useUpdateNodeInternals()	The instance (API reference); the current viewport; hearing the view move from anywhere in the tree; having the canvas re-read a node’s size and handles after it changes what it is made of without telling the canvas.
useInternalNode(id), useStoreApi()	A node plus internals.positionAbsolute and internals.z — narrower than React Flow’s own InternalNode (no handleBounds, no userNode); getState() without subscribing, and subscribe() — no generic setState.
useConnection(selector?)	The connection being dragged right now — fromNode/toNode (flowinger’s InternalNode), fromHandle/toHandle (just what names one: { nodeId, id, type }, not a measured position), isValid, from/to. NoConnection (inProgress: false) when none is.
useHandleConnections(options)	useNodeConnections narrowed to one handle, under React Flow’s older name for it.
BezierEdge, StraightEdge, SmoothStepEdge, StepEdge	The built-in edges, as components — for an edgeTypes entry that renders one and adds to it, or is one under another name.
getBezierPath, getStraightPath, getSmoothStepPath	The path maths, each returning [path, labelX, labelY, offsetX, offsetY].
getEdgeCenter, getBezierEdgeCenter, getViewportForBounds, isNode, isEdge	Smaller helpers React Flow also has: the straight-line and on-curve midpoints a label sits at; a viewportForBounds that matches React Flow’s own fit to the pixel; and the type guards.