open-index/open-npm huggingface dataset:
npm package: @reskin/bpmn
Description: 基于 bpmn-js 封装的 Angular BPMN 2.0 流程图组件库。
Latest version: 0.1.0

# @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 设计，提供更多实用方法