<div align="center">
npm install oolong-engine颠覆传统的新型文档引擎 · Oolong Document
Oolong Engine 是一个创新的文档渲染引擎，旨在颠覆传统的文档编辑体验。它提供了强大的图形节点系统，支持丰富的可视化内容创作。
- 🎨 灵活的图形系统 - 支持形状、连线、SVG、图片等多种节点类型
- 🧩 属性组合设计 - 通过 Props 组合实现高度可扩展的节点定义
- 📐 精确的坐标系统 - 支持父子坐标系、旋转变换等复杂布局
- 🎯 丰富的图形类型 - 矩形、圆形、三角形、菱形、连线、箭头等
- 🖼️ SVG 支持 - 原生支持 SVG 矢量图形嵌入
- 🔗 连接系统 - 智能的节点连接和自动路由功能
- 📦 容器与分组 - Section 和 Group 节点支持层次化组织
- 文档以 .oolong 扩展名保存
- 基于 JSON 的数据结构，易于解析和处理
- 完整的类型定义，支持 TypeScript
- Node.js >= 18.20.0
- pnpm >= 8.0.0
``bash`
pnpm install
启动开发服务器（带热更新）：
`bash`
pnpm dev
或者从根目录运行：
`bash`
pnpm run:engine
开发服务器将在 http://localhost:5173 启动，你可以在浏览器中查看 demo。
构建生产版本：
`bash`
pnpm build
构建产物将输出到 dist/ 目录。
运行单元测试：
`bash`
pnpm test
详细的 API 文档和数据结构说明，请参考：
- 数据结构说明 - 完整的图形节点和属性系统文档
- 示例数据 - 各种图表和文档的示例数据
查看 demo/ 目录下的示例代码，了解如何使用 Oolong Engine：
`typescript
import { OolongNode } from "@oolong/engine";
// 创建一个简单的矩形节点
const node: OolongNode = {
id: "a1:1",
type: 0,
parentId: "ROOT",
capInfo: {
baseProps: { x: 100, y: 100, width: 200, height: 100, angle: 0 },
colorProps: { color: "#E0E2FA", alpha: 1 },
borderProps: { color: "#7B83EA", alpha: 1, width: 2, dashType: 1 },
textProps: { text: "Hello Oolong!", fontSize: 16 / ... / },
shapeProps: { shapeCode: 16 }, // RoundRect
},
children: [],
zIndex: 1,
};
`
`
packages/oolong-engine/
├── src/ # 源代码
│ ├── app/ # 应用核心
│ ├── component/ # 组件
│ ├── graphics/ # 图形渲染
│ ├── math/ # 数学工具
│ ├── resource/ # 资源管理
│ └── types/ # 类型定义
├── demo/ # 示例代码
├── description/ # 文档说明
│ ├── DESCRIPTION.md
│ └── example/ # 示例数据
├── test/ # 测试文件
└── package.json
- TypeScript - 类型安全的开发体验
- Canvas API - 高性能图形渲染
- Vite - 快速的开发构建工具
- Jest - 单元测试框架
欢迎提交 Issue 和 Pull Request！
MIT License
J.N (Jason Nee)
---