1.1.0 • Published 2 years ago
easy-graph v1.1.0
Easy-Graph
🔖首届支付宝前锋营进阶课「都不队」小组结业项目。
🏷️开源:基于 React
的开源 可拖拽 图渲染和布局库。
🪶轻量:除 React
外无第三方依赖。
🚀简洁:内置多种布局算法 给您快捷多样的体验。
🌹 自由:高度可定制 支持自定义注册节点样式和边样式。
🐥 功能丰富:节点支持拖拽 图会响应式渲染 画板支持缩放 平移。
🦚支持导入导出:支持导入导出数据。
使用方法:
安装:
npm i easy-graph
快速开始:
1.导入组件
import { EGProvider, EGContext,useRegister } from 'easy-graph';
2.自定义组件 (若使用默认组件,可跳过)
边:
const YourEdge: CustomEdge<YourData> = ({
edgeId:string;
startEndPosition:[number,number,number,number];
data:YourData;
})=>{
return (
//消费数据的组件
)
}
节点:
const YourNode: CustomNode<YourData> = ({
nodeId:string;
data:YourData;
})=>{
return (
//消费数据的组件
)
}
3.注册自定义组件
{
[elementType:string]:Element;
}
4.渲染图
首先要先初始化要消费的数据,其中
nodes是形如下面的对象的数组
interface NodeProps{
nodeType:string;//对应注册的组件
nodeId:string;//唯一id
position:[number, number];//位置
data?:any;//自己的组件要消费的数据
}
edges是形如下面的对象的数组
interface EdgeProps{
edgeId:string;//边的id
edgeType:string;//对应注册的组件
startEndNodeId:[string,string];//两个端点的id
data?:any;//自己的组件要消费的数据
}
最后
<EGProvider>
<EGContext
nodes={nodes}
edges={edges}
regist={elements}>
</EGContext>
</EGProvider>