repository·master·Indexed 22 days ago
https://github.com/reaviz/reaflowA modular diagram engine for building static or interactive node-based visualizations and editors in React. Version 5.4.1 features automatic layout via ELKJS, customizable nodes, edges, and ports, and advanced graph logic including nesting and undo/redo support. It provides a Canvas component with a CanvasRef API for imperative control over zooming, panning, and viewport positioning.
Reaflow is a modular diagram engine for building static or interactive editors in React. Key features include:
Reaflow is built using a set of modular components that you can customize to control the appearance and behavior of your flow diagrams. The core components include:
Reaflow provides built-in helper functions to manage common interactions with the canvas and the graph. These helpers are categorized into three main types:
Note on usage: These helpers are designed as generic starting points. They are not intended to cover every possible specific use case. If a built-in helper does not meet your requirements, you should copy the implementation and adapt it to your specific needs.
To build a diagram in Reaflow, you must define two data structures: nodes and edges.
id (string). You can optionally include a text or icon property to display content within the node.id, a from property (the ID of the source node), and a to property (the ID of the target node).const nodes = [
{
id: '1',
text: '1'
},
{
id: '2',
text: '2'
}
];
const edges = [
{
id: '1-2',
from: '1',
to: '2'
}
];In Reaflow, custom nodes are rendered using foreignObject, which is an SVG element. Standard CSS z-index has no effect on SVG elements.
To control the visual stacking order, you must rely on the SVG rendering rule: the last element defined in the DOM is displayed on top of the previous elements. In a Reaflow node, the foreignObject will naturally appear on top of the rect component because it is defined after it in the SVG structure.
Reaflow graphs are constructed using three fundamental data shape objects. Understanding these shapes is essential for defining the structure and connectivity of your graph:
NodeData: Represents the element blocks (nodes) rendered in the graph.EdgeData: Represents the links (edges) connecting nodes.PortData: Represents specific enter/exit points on a node used to facilitate precise connections between nodes.React.useState for simple applications, or shared state managers like Redux, Recoil, xState, or MobX as your application grows and requires shared state across different components.The useProximity hook works by correlating the mouse pointer position to the canvas coordinates, accounting for both canvas offset and zoom levels. It uses the kld-affine library for geometric matrix calculations.
As a user drags, the hook measures the distance of all nodes relative to the pointer. If the closest node's distance is within the minDistance threshold (which defaults to 40), a match is triggered.
When using Reaflow in a Next.js environment, the Canvas component should not be rendered on the server. While rendering it on the server won't crash your application, it will trigger numerous noisy warnings related to useEffect and other client-side hooks.
To prevent this, wrap the Canvas component in a conditional check to ensure it only renders when the window object is defined (i.e., on the client side).
import React from 'react';
import { Canvas } from 'reaflow';
const Page = () => (
<div style={{position: 'relative', width: '100vw', height: '100vh'}}>
<div style={{position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, 'backgroundColor': '#F5F5F5'}}>
{
// Don't render the Canvas on the server
typeof window !== 'undefined' && (
<Canvas
maxWidth={800}
maxHeight={600}
nodes={[
{
id: '1',
text: '1'
},
{
id: '2',
text: '2'
}
]}
edges={[
{
id: '1-2',
from: '1',
to: '2'
}
]}
/>
)
}
</div>
</div>
);
export default Page;If you do not want the automatic hotkeys or logic provided by useSelection, you can manage selection state manually. You must maintain a state of selected IDs (strings) and pass them to the Canvas component, while manually updating that state via onClick handlers on Node, Edge, or Canvas components.
import { NodeData, EdgeData } from 'reaflow';
const [selections, setSelections] = useState<string[]>([]);
const [nodes] = useState<NodeData[]>([
{ id: '1', text: 'Node 1' }
]);
const [edges] = useState<EdgeData[]>([
{ id: '1-2', from: '1', to: '2' }
]);
<Canvas
nodes={nodes}
edges={edges}
selections={selections}
node={
<Node
onClick={(event, node) => {
setSelections([node.id]);
}}
/>
}
edge={
<Edge
onClick={(event, edge) => {
setSelections([edge.id]);
}}
/>
}
onCanvasClick={(event) => {
setSelections([]);
}}
/>Canvas instance using a React ref. This allows you to perform imperative actions externally, such as centering the canvas, fitting nodes to the viewport, or controlling zoom levels. To use it, create a ref with the type CanvasRef and pass it to the ref prop of the <Canvas /> component.