Custom Edge
As mentioned on the home page, the Edge is also Cell. Because of the complexity of the edge graph, we have given Edge a default Component, but you can still rely on the EdgeModel's methods and properties to customize Edge's Component. It is also possible to dynamically create different edges according to the status of the connection
import { Flow } from "moa-flow";
import { BizNode, BizNodeModel } from "./BizNode";
import { BizEdge, BizEdgeModel } from "./BizEdge";
export const App = () => {
return (
<Flow
components={{
BizNode: BizNode,
BizEdge: BizEdge,
}}
models={{
BizNode: BizNodeModel,
BizEdge: BizEdgeModel,
}}
linkEdge={(source, target) => {
if (!target.id) return "Edge";
return "BizEdge";
}}
canvasData={{
cells: [
{
component: "BizNode",
nodeName: "node 0",
x: 50,
y: 50,
ports: [{ portType: "in" }, { portType: "out", id: "0-out" }],
},
{
component: "BizNode",
nodeName: "node 1",
x: 500,
y: 200,
ports: [{ portType: "in", id: "1-in" }, { portType: "out" }],
},
{
component: "BizEdge",
nodeName: "node 1",
source: "0-out",
target: "1-in",
},
],
}}
></Flow>
);
};Dynamically add port
You can dynamically add port, but after modifying the node's ports data, you need to call syncPorts() to let moa-flow re-index the ports of node to improve performance
import { Flow } from "moa-flow";
import { BizNode, BizNodeModel } from "./BizNode";
export const App = () => {
return (
<Flow
components={{
BizNode: BizNode,
}}
models={{
BizNode: BizNodeModel,
}}
canvasData={{
cells: [
{
component: "BizNode",
nodeName: "node 0",
x: 50,
y: 50,
ports: [{ portType: "in" }, { portType: "out", id: "0-out" }],
},
{
component: "BizNode",
nodeName: "node 1",
x: 500,
y: 200,
ports: [{ portType: "in", id: "1-in" }, { portType: "out" }],
},
{
component: "Edge",
nodeName: "node 1",
source: "0-out",
target: "1-in",
},
],
}}
></Flow>
);
};Parent-child node
By setting the parent attribute in the data of the node's Model, you can set the parent for the node. When the parent node moves, the child nodes will also move together
import { Flow, NodeModel } from "moa-flow";
import { BizNode, BizNodeModel } from "./BizNode";
import { ParentNode } from "./ParentNode";
export const App = () => {
return (
<Flow
components={{
BizNode,
ParentNode,
}}
models={{
BizNode: BizNodeModel,
ParentNode: NodeModel,
}}
linkEdge="BizEdge"
canvasData={{
x: 50,
y: 50,
cells: [
{
component: "ParentNode",
id: 1,
},
{
component: "BizNode",
nodeName: "child node",
id: 0,
y: 120,
x: 50,
parent: 1,
ports: [{ portType: "in" }, { portType: "out" }],
},
],
}}
/>
);
};MiniMap
moa-flow has a built-in mini-map plug-in, and detailed usage can be viewed on the API page
import { useRef } from "react";
import { Flow, ContextMenu, FlowModel } from "moa-flow";
import { BizNode } from "./BizNode";
import { BizNodeModel } from "./BizNodeModel";
import { Button } from "antd";
export const App = () => {
const flowModelRef = useRef<FlowModel>();
return (
<Flow
flowModelRef={flowModelRef}
components={{
BizNode: BizNode,
}}
models={{
BizNode: BizNodeModel,
}}
canvasData={{
cells: [
{
component: "BizNode",
nodeName: "node 0",
x: 50,
y: 50,
},
{
component: "BizNode",
nodeName: "node 1",
x: 500,
y: 300,
},
],
}}
>
<ContextMenu>
<Button
onClick={() => {
const flowModel = flowModelRef.current;
flowModel.addCell("BizNode", {
x: 300,
y: 300,
});
}}
>
add node
</Button>
<Button
onClick={() => {
const flowModel = flowModelRef.current;
const { selectCells, deleCell } = flowModel;
deleCell(selectCells[0]);
}}
>
delete
</Button>
</ContextMenu>
</Flow>
);
};Custom tools
You can get the context of the graph, and on this basis, it is very convenient to customize the expansion tools
import { Flow } from "moa-flow";
import { BizNode, BizNodeModel } from "./BizNode";
import { Toolbar } from "./Toolbar";
export const App = () => {
return (
<Flow
components={{
BizNode: BizNode,
}}
models={{
BizNode: BizNodeModel,
}}
canvasData={{
cells: [
{
component: "BizNode",
nodeName: "node 0",
x: 250,
y: 50,
},
{
component: "BizNode",
nodeName: "node 1",
x: 500,
y: 200,
},
],
}}
>
<Toolbar />
</Flow>
);
};Set Layout
If you want a graph with a fixed layout (such as a dagre graph), you can also import a third-party layout library such as dagre.js, because the layout library actually just changes the x and y properties of the nodes to make them in the correct position
import { Flow, FlowModel } from "moa-flow";
import { BizNode, BizNodeModel } from "./BizNode";
import dagre from "dagre";
import { useEffect, useRef } from "react";
import { cells } from "./data";
export const App = () => {
const flowModelRef = useRef<FlowModel>();
const dagreGraph = new dagre.graphlib.Graph();
dagreGraph.setDefaultEdgeLabel(() => ({}));
const nodeWidth = 200;
const nodeHeight = 181;
const setLayoutedCells = (nodes, edges, direction = "LR") => {
const context = flowModelRef.current;
dagreGraph.setGraph({ rankdir: direction, ranksep: 150 });
nodes.forEach((node) => {
dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
});
edges.forEach((edge) => {
dagreGraph.setEdge(
context.getCellData(edge.source).host,
context.getCellData(edge.target).host
);
});
dagre.layout(dagreGraph);
nodes.forEach((node) => {
const nodeWithPosition = dagreGraph.node(node.id);
context.setCellData(node.id, {
x: nodeWithPosition.x - nodeWidth / 2,
y: nodeWithPosition.y - nodeHeight / 2,
});
});
};
useEffect(() => {
const context = flowModelRef.current;
setLayoutedCells(context.getNodesData(), context.getEdgesData());
});
return (
<Flow
flowModelRef={flowModelRef}
components={{
BizNode,
}}
models={{
BizNode: BizNodeModel,
}}
canvasData={{
x: 100,
y: 100,
scale: 0.7,
cells,
}}
/>
);
};Last updated on March 3, 2023