包名：@wsc-tech/guanshi-bpmn-editor

定位

• 提供两个核心组件：BpmnEditor（编辑器）与 BpmnViewer（只读查看器）。
• 采用 SVG 画布实现拖拽放置、连接、缩放与平移，支持基础 BPMN 元素（事件、任务、网关、子流程）。
• 内置 BPMN XML 解析与导出能力，可与外部系统做 XML/JSON 的双向交换。
• 支持自定义属性面板组件与双语界面（en/zh）。

核心特性

• 拖拽放置：从工具栏 Palette 直接拖拽到画布（事件、任务、网关、子流程）。
• 连接模式：点选或双击节点进入连接模式，自动计算正交路径并处理网关线束分配。
• 键盘快捷键：Delete/Backspace 删除选中；方向键移动节点；Shift 加速；Esc 退出连接模式。
• 画布交互：滚轮缩放、按住拖拽平移；导入时自动缩放至合适视野。
• 属性面板：选择节点/连线后侧栏可编辑；可注入自定义 React 组件。
• 数据交换：导入 .bpmn/.xml，导出 BPMN XML 或结构化 JSON。
• 查看模式：BpmnViewer 支持执行态高亮（当前节点/已完成节点与连线）。

项目结构

• 入口与导出：lib.ts（命名导出与默认导出）
• 组件：components/BpmnEditor.tsx、components/BpmnViewer.tsx、components/BpmnCanvas.tsx
• 工具栏：components/Toolbar.tsx
• 类型定义：types.ts
• 解析与导出：utils/bpmnParser.ts（parseBpmnXml、exportBpmnXml、getOrthogonalPath）
• 示例默认 XML：constants.ts

安装与构建

• 安装依赖：npm install
• 开发预览：npm run dev
• 库构建：npm run build（生成 dist/guanshi-bpmn-editor.js ESM 与 dist/guanshi-bpmn-editor.umd.cjs UMD）

导入用法

• 默认导入：

  import BpmnEditor from '@wsc-tech/guanshi-bpmn-editor';

• 命名导入：

  import { BpmnEditor, BpmnViewer, parseBpmnXml, exportBpmnXml } from '@wsc-tech/guanshi-bpmn-editor';

• CommonJS：

  const BpmnEditor = require('@wsc-tech/guanshi-bpmn-editor').default;

快速示例

import React, { useState } from 'react';
import BpmnEditor from '@wsc-tech/guanshi-bpmn-editor';

export default function Page() {
  const [xml, setXml] = useState('');
  return (
    <BpmnEditor
      value={xml}
      onChange={setXml}
      language="zh"
      saveFormat="json"
      onSave={(data) => console.log('save', data)}
      toolbarOptions={{ showImport: true, showNew: true, showExportJson: true, showExportXml: true }}
    />
  );
}

API 概览

• BpmnEditor：
  • value?: string 初始 XML
  • onChange?: (xml: string) => void 变更回调（XML）
  • configComponents?: Record<string, React.FC> 自定义属性面板组件映射
  • language?: 'en' | 'zh' 语言
  • onSave?: (data: string | object) => void 保存事件（saveFormat 控制输出）
  • saveFormat?: 'xml' | 'json'
  • toolbarOptions?: { showImport?: boolean; showExportXml?: boolean; showExportJson?: boolean; showNew?: boolean }
• BpmnViewer：
  • xml: string 必填 XML
  • language?: 'en' | 'zh'
  • executionStatus?: { completedNodeIds?: string[]; currentNodeIds?: string[]; completedEdgeIds?: string[] }

解析与导出

• parseBpmnXml(xml: string): DiagramState（从 BPMN XML 解析为内部结构）
• exportBpmnXml(state: DiagramState): string（将内部结构导出为 BPMN XML）

开发者提示

• 默认/命名导出均可使用：lib.ts:2-5 已声明 export { BpmnEditor as default } ...。
• 包入口已在 package.json:7-18 中通过 exports/main 指向 dist 构建文件。
• 画布与交互逻辑主要在 components/BpmnCanvas.tsx；正交路径与网关线束分配见 utils/bpmnParser.ts。

许可证

• MIT