# Oolong Engine

<div align="center">

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

[![Version](https://img.shields.io/badge/version-0.0.1-blue.svg)](https://github.com/jasonnee250/oolong)
[![Node](https://img.shields.io/badge/node-%5E18.20.0-brightgreen.svg)](https://nodejs.org)
[![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)

</div>

## 📖 简介

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 文档和数据结构说明，请参考：

- [数据结构说明](./description/DESCRIPTION.md) - 完整的图形节点和属性系统文档
- [示例数据](./description/example/) - 各种图表和文档的示例数据

### 示例

查看 `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)**

---

<div align="center">
Made with ❤️ by the Oolong Team
</div>
