一个基于LeaferJS构建的高性能工作流可视化工具库。
- 🚀 基于LeaferJS的高性能渲染
- 📦 TypeScript支持，完整的类型定义
- 🎯 模块化架构，易于扩展
- 🔧 完整的节点和连接管理
- 🎨 可自定义的节点和连接样式
- 📱 支持拖拽、缩放、平移等交互
- 💾 数据序列化和反序列化
- 🧪 基于属性的测试保证代码质量
- ⚡ 性能优化，支持大规模工作流
- 🔄 撤销/重做功能
- 🎛️ 丰富的事件系统
如果您还没有安装 pnpm，请选择以下方式之一：
# 方式 1: 使用 npm 安装
npm install -g pnpm
# 方式 2: 使用 curl (Linux/macOS)
curl -fsSL https://get.pnpm.io/install.sh | sh -
# 方式 3: 使用 PowerShell (Windows)
iwr https://get.pnpm.io/install.ps1 -useb | iex
# 方式 4: 使用 Homebrew (macOS)
brew install pnpmpnpm --version
# 应该显示版本号，如: 8.10.0- 性能优势: pnpm 比 npm 快 2-3 倍，比 yarn 快 1.5-2 倍
- 磁盘空间: 通过硬链接和符号链接节省高达 50% 的磁盘空间
- 依赖管理: 更严格的依赖管理，避免幽灵依赖问题
- 项目配置: 本项目的构建脚本和配置专门为 pnpm 优化
# 安装 Leafer-Flow
pnpm add leafer-flow
# 或者安装开发版本
pnpm add leafer-flow@latestimport { FlowEditor } from 'leafer-flow';
// 创建编辑器实例
const container = document.getElementById('flow-container');
const editor = new FlowEditor(container, {
width: 800,
height: 600,
background: '#f5f5f5',
grid: true
});
// 添加节点
const node = editor.addNode({
id: 'node-1',
type: 'default',
position: { x: 100, y: 100 },
data: { label: '开始节点' },
ports: [
{ id: 'output', type: 'output', position: 'right' }
]
});
// 添加连接
const edge = editor.addEdge({
id: 'edge-1',
source: 'node-1',
sourcePort: 'output',
target: 'node-2',
targetPort: 'input'
});# 克隆项目
git clone <repository-url>
cd leafer-flow
# 安装依赖 (必须使用 pnpm)
pnpm install
# 验证安装
pnpm run build
pnpm run test# 开发模式 (监听文件变化)
pnpm dev
# 运行测试
pnpm test
# 监听模式运行测试
pnpm test:watch
# 运行属性测试
pnpm test:properties
# 构建项目
pnpm build
# 代码检查
pnpm lint
# 自动修复代码风格
pnpm lint:fix
# 测试覆盖率
pnpm test:coverage
# 清理构建文件
pnpm cleanpnpm dev: 启动 TypeScript 编译器的监听模式pnpm test: 运行所有测试（单元测试 + 属性测试）pnpm test:properties: 专门运行属性测试pnpm build: 编译 TypeScript 代码到 dist 目录pnpm lint: 检查代码风格和潜在问题
Leafer-Flow采用模块化架构设计：
- FlowEditor: 主编辑器类，协调所有子系统
- NodeManager: 节点管理器，处理节点的增删改查
- EdgeManager: 连接管理器，处理连接线的管理
- InteractionSystem: 交互系统，处理用户交互（拖拽、选择等）
- EventSystem: 事件系统，提供完整的事件机制
- ViewportManager: 视图管理器，处理缩放和平移
- SerializationManager: 序列化管理器，处理数据的保存和加载
- NodeRenderer: 节点渲染器，支持自定义节点样式
- EdgeRenderer: 连接线渲染器，支持多种连接线类型
- PerformanceSystem: 性能系统，优化大规模工作流渲染
- HistorySystem: 历史系统，提供撤销/重做功能
- 🎯 虚拟化渲染: 只渲染可见区域的元素
- 📊 细节层次 (LOD): 根据缩放级别调整渲染细节
- 🔄 批量操作: 高效处理大量节点的创建和更新
- 💾 对象池化: 减少垃圾回收压力
- ⚡ 智能重绘: 只重绘变化的区域
- 📈 性能监控: 实时监控渲染性能和内存使用
- Node.js >= 16.0.0
- pnpm >= 8.0.0 (必须)
- TypeScript >= 5.0.0
- Fork 项目
- 创建功能分支:
git checkout -b feature/amazing-feature - 使用 pnpm 安装依赖:
pnpm install - 进行开发并确保测试通过:
pnpm test - 提交更改:
git commit -m 'Add amazing feature' - 推送分支:
git push origin feature/amazing-feature - 创建 Pull Request
- 使用 TypeScript 进行开发
- 遵循 ESLint 配置的代码风格
- 为新功能编写单元测试和属性测试
- 更新相关文档
MIT License - 详见 LICENSE 文件
如果您在使用过程中遇到问题或有改进建议：
记住: 始终使用 pnpm 作为包管理器以获得最佳的开发体验和性能！