使用 react-reconciler
自 定 义渲染 器 只 需抽象 create/update/removeFrom既 可 最 后 渲染出来 的 instance就是Graph/Node/Edge对象,这些对象使用 ref可 以直接 绑定- Graph
内 部将 Children做进一 步 处理,通 过cloneElement强行 生成 带key的 子 组件(避免list diff导致元素 id变化)
npm install react-x6
yarn add react-x6
import { Graph, Node, Edge } from 'react-x6'
import { Snapline } from "@antv/x6-plugin-snapline";
// 使用 ElementOfPlugin定 义组件
const SnaplinePlugin = ElementOfPlugin('Snapline', Snapline)
export default function App() {
// ...
return (
<Graph background grid width={800} height={600}>
<SnaplinePlugin key="snapline" enabled={true}/>
<Node id="1" x={100} y={100} label="node1" width={80} height={40}></Node>
<Node id="3" x={200} y={100} label="node3" width={80} height={40} parent="1" />
<Node id="2" x={200} y={200} label="node2" width={80} height={40} />
<Node id="4" x={200} y={250} label="node4" width={80} height={40} ref={node4} />
<Node id="5" x={300} y={250} label="node5" width={80} height={40} onClick={e => {
console.log('onClick', e)
}} />
<Edge source="1" target="2" />
</Graph>
)
}
-
提供 渲染器 - Graph组件
- Node/Edge组件
- ElementOfPlugin
函数 方便 封 装 官 方 plugin - Label(Edge)
- NodePort
- NodeTool/EdgeTool
- SourceMarker/TargetMarker
remove Fragment, using flat array