Oolong Engine

颠覆传统的新型文档引擎 · Oolong Document

📖 简介

Oolong Engine 是一个创新的文档渲染引擎，旨在颠覆传统的文档编辑体验。它提供了强大的图形节点系统，支持丰富的可视化内容创作。

核心特性

• 🎨 灵活的图形系统 - 支持形状、连线、SVG、图片等多种节点类型
• 🧩 属性组合设计 - 通过 Props 组合实现高度可扩展的节点定义
• 📐 精确的坐标系统 - 支持父子坐标系、旋转变换等复杂布局
• 🎯 丰富的图形类型 - 矩形、圆形、三角形、菱形、连线、箭头等
• 🖼️ SVG 支持 - 原生支持 SVG 矢量图形嵌入
• 🔗 连接系统 - 智能的节点连接和自动路由功能
• 📦 容器与分组 - Section 和 Group 节点支持层次化组织

文档格式

• 文档以 .oolong 扩展名保存
• 基于 JSON 的数据结构，易于解析和处理
• 完整的类型定义，支持 TypeScript

🚀 快速开始

环境要求

• Node.js >= 18.20.0
• pnpm >= 8.0.0

安装依赖

pnpm install

开发模式

启动开发服务器（带热更新）：

pnpm dev

或者从根目录运行：

pnpm run:engine

开发服务器将在 http://localhost:5173 启动，你可以在浏览器中查看 demo。

构建

构建生产版本：

pnpm build

构建产物将输出到 dist/ 目录。

测试

运行单元测试：

pnpm test

📚 文档

详细的 API 文档和数据结构说明，请参考：

• 数据结构说明 - 完整的图形节点和属性系统文档
• 示例数据 - 各种图表和文档的示例数据

示例

查看 demo/ 目录下的示例代码，了解如何使用 Oolong Engine：

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)