SolidJS 版本的流程图组件库,移植自 [xyflow/react](https://github.com/xyflow/xyflow)。
npm install @ensolid/solidflowSolidJS 版本的流程图组件库,移植自 xyflow/react。
``bash`
pnpm add @ensolid/solidflow
`tsx
import { Flow, DefaultNode } from '@ensolid/solidflow';
import { createSignal } from 'solid-js';
function App() {
const [nodes, setNodes] = createSignal([
{
id: '1',
type: 'default',
position: { x: 0, y: 0 },
data: { label: '节点 1' },
},
{
id: '2',
type: 'default',
position: { x: 200, y: 200 },
data: { label: '节点 2' },
},
]);
const [edges, setEdges] = createSignal([
{
id: 'e1-2',
source: '1',
target: '2',
},
]);
return (
组件
$3
主要的流程图组件。
Props:
-
nodes: 节点数组
- edges: 边数组
- onNodesChange: 节点变化回调
- onEdgesChange: 边变化回调
- onConnect: 连接回调
- onConnectStart: 连接开始回调
- onConnectEnd: 连接结束回调
- nodeTypes: 自定义节点类型
- edgeTypes: 自定义边类型
- fitView: 是否自动适配视图
- nodesDraggable: 节点是否可拖拽
- nodesConnectable: 节点是否可连接
- 更多配置项请参考类型定义$3
节点组件,用于渲染单个节点。
$3
边组件,用于渲染连接线。支持以下边类型:
-
default / simplebezier: 简单贝塞尔曲线(默认)
- bezier: 贝塞尔曲线
- straight: 直线
- smoothstep / step: 平滑步进路径$3
连接点组件,用于节点之间的连接。
Props:
-
type: 'source' | 'target'
- position: 'top' | 'bottom' | 'left' | 'right'
- id: Handle ID
- nodeId: 节点 ID(用于连接)
- connectable: 是否可连接$3
背景组件,提供网格或点状背景。
$3
控制按钮组件,提供缩放、适合视图等功能。
$3
小地图组件,显示整个流程图的缩略图。
$3
面板组件,用于在画布上放置自定义内容。
$3
Context Provider,为 Flow 组件提供上下文,支持 Hooks API。
Hooks
$3
获取节点数组和更新函数。
`tsx
const [nodes, setNodes] = useNodes();
`$3
获取边数组和更新函数。
`tsx
const [edges, setEdges] = useEdges();
`$3
获取 ReactFlow 实例,提供各种操作 Flow 的方法。
`tsx
const reactFlowInstance = useReactFlow();
`工具函数
$3
应用节点变化。
`tsx
const newNodes = applyNodeChanges(changes, nodes);
`$3
应用边变化。
`tsx
const newEdges = applyEdgeChanges(changes, edges);
`$3
添加边。
`tsx
const newEdges = addEdge(connection, edges);
`$3
-
getStraightPath: 获取直线路径
- getBezierPath: 获取贝塞尔曲线路径
- getSimpleBezierPath: 获取简单贝塞尔曲线路径
- getSmoothStepPath`: 获取平滑步进路径⚠️ 本项目仍在开发中,API 可能会有变化。
MIT