Graph
具有动态比例感知细节的高性能图形渲染器
@gravity-ui/graph · 
具有比例感知细节的高性能图形渲染器
安装和设置
npm install @gravity-ui/graph
示例
import {GraphCanvas, GraphState, TRenderBlockFn, GraphBlock, useGraph} from '@gravity-ui/graph';
import React from 'react';
const config = {};
export function GraphEditor() {
const {graph, setEntities, start} = useGraph(config);
useEffect(() => {
setEntities({
blocks: [
{
is: 'block-action',
id: 'action_1',
x: -100,
y: -450,
width: 126,
height: 126,
selected: true,
name: 'Block #1',
anchors: [],
},
{
id: 'action_2',
is: 'block-action',
x: 253,
y: 176,
width: 126,
height: 126,
selected: false,
name: 'Block #2',
anchors: [],
},
],
connections: [
{
sourceBlockId: 'action_1',
targetBlockId: 'action_2',
},
],
});
});
const renderBlockFn = (graph, block) => {
return (
<GraphBlock graph={graph} block={block}>
{block.id}
</GraphBlock>
);
};
return (
<GraphCanvas
graph={graph}
renderBlock={renderBlockFn}
onStateChanged={({state}) => {
if (state === GraphState.ATTACHED) {
start();
graph.zoomTo('center', {padding: 300});
}
}}
/>
);
}
