@reskin/bpmn 0.0.6 → 0.1.0

package/README.md

@@ -1 +1,142 @@
 # @reskin/bpmn
+
+基于 bpmn-js 封装的 Angular BPMN 2.0 流程图组件库。
+
+## 特性
+
+- ✅ 完整的 BPMN 2.0 标准支持
+- ✅ 流程图编辑器和只读查看器
+- ✅ 中文汉化界面
+- ✅ 网格和小地图功能
+- ✅ 导入/导出 BPMN XML 和 SVG
+- ✅ 使用 Tailwind CSS 构建
+- ✅ 完整的 TypeScript 类型定义
+- ✅ 单元测试覆盖
+
+## 安装
+
+```bash
+npm install bpmn-js@17 diagram-js-grid@1 diagram-js-minimap@5
+npm install @reskin/bpmn
+```
+
+## 快速开始
+
+### 1. 导入模块
+
+```typescript
+import { RkBpmnModule } from '@reskin/bpmn';
+
+@NgModule({
+    imports: [RkBpmnModule],
+})
+export class AppModule {}
+```
+
+### 2. 导入样式
+
+在 `styles.scss` 中：
+
+```scss
+@import '@reskin/bpmn/bpmn.scss';
+```
+
+### 3. 使用组件
+
+```html
+<!-- 编辑器 -->
+<rk-bpmn-editor [data]="bpmnXml"></rk-bpmn-editor>
+
+<!-- 查看器 -->
+<rk-bpmn-viewer [data]="bpmnXml"></rk-bpmn-viewer>
+```
+
+## 文档
+
+完整文档请查看：[流程图组件文档](../../web/src/assets/doc/extends/流程图.md)
+
+## API
+
+### RkBpmnEditorComponent
+
+编辑器组件，提供完整的 BPMN 流程图编辑功能。
+
+**输入属性：**
+- `data?: string` - BPMN XML 数据
+- `propertiesTemplate?: TemplateRef<void>` - 自定义属性面板模板
+
+**输出事件：**
+- `selectionChange: EventEmitter<RkBpmnSelectionChangeEvent>` - 选中元素变化事件
+
+**公共方法：**
+- `importXML(xml: string)` - 导入 BPMN XML
+- `saveXML(format?: boolean)` - 保存为 XML
+- `downloadBPMN(config?)` - 下载为 .bpmn 文件
+- `downloadSVG(filename?)` - 下载为 .svg 文件
+- `zoomIn()` / `zoomOut()` / `zoomReset()` - 缩放操作
+- 更多方法请查看完整文档
+
+### RkBpmnViewerComponent
+
+查看器组件，提供只读的 BPMN 流程图查看功能。
+
+**输入属性：**
+- `data!: string` - BPMN XML 数据（必填）
+
+**输出事件：**
+- `afterRenderChange: EventEmitter<RkBpmnAfterRenderEvent>` - 渲染完成事件
+
+**公共方法：**
+- `importXML(xml: string)` - 导入 BPMN XML
+- `zoomIn()` / `zoomOut()` / `zoomReset()` - 缩放操作
+- 更多方法请查看完整文档
+
+## 示例
+
+```typescript
+import { Component } from '@angular/core';
+import { RkBpmnSelectionChangeEvent } from '@reskin/bpmn';
+
+@Component({
+    selector: 'app-demo',
+    template: `
+        <rk-bpmn-editor
+            [data]="bpmnXml"
+            (selectionChange)="onSelectionChange($event)">
+        </rk-bpmn-editor>
+    `,
+})
+export class DemoComponent {
+    bpmnXml = `<?xml version="1.0" encoding="UTF-8"?>
+        <bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL">
+            <bpmn:process id="Process_1" isExecutable="false" />
+        </bpmn:definitions>`;
+
+    onSelectionChange(event: RkBpmnSelectionChangeEvent): void {
+        console.log('选中的元素:', event.element);
+    }
+}
+```
+
+## 依赖
+
+- Angular 12.x
+- bpmn-js 17.x
+- diagram-js-grid 1.x
+- diagram-js-minimap 5.x
+
+## 许可证
+
+MIT
+
+## 更新日志
+
+### 0.0.7 (重构版本)
+
+- 🎨 使用 Tailwind CSS 重构 UI
+- 🏗️ 引入抽象基类，优化代码结构
+- 📝 完善 TypeScript 类型定义
+- 🧪 添加完整的单元测试
+- 📚 重写技术文档
+- ⚡ 优化生命周期和内存管理
+- 🔧 改进 API 设计，提供更多实用方法