一个基于 ReactFlow 的流程图编辑器组件,提供图形化编辑、节点管理、边连接等功能。
npm install @graphscope/studio-flow-editor一个基于 ReactFlow 的流程图编辑器组件,提供图形化编辑、节点管理、边连接等功能。
- 🎨 基于 ReactFlow 的流程图编辑器
- 📦 支持节点和边的增删改查
- 🖱️ 支持拖拽、缩放、平移等交互
- 🎯 支持自定义节点和边的样式
- 🔄 支持数据导入导出
- 🎮 提供丰富的工具函数和 hooks
``bash`
npm install @graphscope/studio-flow-editor或
yarn add @graphscope/studio-flow-editor
`tsx
import { GraphEditor, GraphProvider } from '@graphscope/studio-flow-editor';
function App() {
return (
);
}
`
流程图编辑器主组件。
`tsx`
#### Props
| 参数 | 类型 | 说明 |
| -------------- | --------------- | ------------------------------------------ |
| children | React.ReactNode | 可以在 ReactFlow 内部添加自定义子组件 |
| showBackground | boolean | 可以在 ReactFlow 是否显示背景,默认为 true |
| showMinimap | boolean | 是否显示迷你地图,默认为 true |
| showDefaultBtn | boolean | 是否显示默认按钮控制器,默认为 true |
#### AddNode
添加节点按钮。
`tsx
import { AddNode } from '@graphscope/studio-flow-editor';
`
#### ClearCanvas
清空画布按钮。
`tsx
import { ClearCanvas } from '@graphscope/studio-flow-editor';
`
#### ExportSvg
导出 SVG 按钮。
`tsx
import { ExportSvg } from '@graphscope/studio-flow-editor';
`
状态管理 hook。
`tsx
import { useGraphStore } from '@graphscope/studio-flow-editor';
const { store, updateStore } = useGraphStore();
`
清空画布 hook。
`tsx
import { useClearCanvas } from '@graphscope/studio-flow-editor';
const { clearCanvas } = useClearCanvas();
`
添加节点 hook。
`tsx
import { useAddNode } from '@graphscope/studio-flow-editor';
const { addNode } = useAddNode();
`
导出 SVG hook。
`tsx
import { useExportSvg } from '@graphscope/studio-flow-editor';
const { exportSvg } = useExportSvg();
`
`typescript
import { getBBox } from '@graphscope/studio-flow-editor';
// 获取节点边界框
const bbox = getBBox(nodes);
`
`typescript
import { createNodeLabel, createEdgeLabel } from '@graphscope/studio-flow-editor';
// 创建节点标签
const nodeLabel = createNodeLabel();
// 创建边标签
const edgeLabel = createEdgeLabel();
`
`typescript
import { fakeSnapshot } from '@graphscope/studio-flow-editor';
// 创建数据快照
const snapshot = fakeSnapshot(data);
`typescript
import { ISchemaNode, ISchemaEdge } from '@graphscope/studio-flow-editor';
// 节点类型
const node: ISchemaNode = {
id: '1',
type: 'default',
position: { x: 0, y: 0 },
data: { label: 'Node 1' }
};
// 边类型
const edge: ISchemaEdge = {
id: 'e1-2',
source: '1',
target: '2',
data: { label: 'Edge 1-2' }
};
``