Bpmn Builder

深色模式

全局配置 ​

为方便自定义注册节点、自定义默认节点图标等功能，我们提供了一些全局配置项。详情如下

自定义节点图标 ​

为保证节点图标渲染效果，自定义节点图标需使用视图大小为 24*24，且经过 "复合路径" 及 "路径轮廓化描边" 处理的 SVG 图片，保证有且仅有一个 path 路径。

  • 配置项: extIconPath: string
  • 描述: 声明自定义节点图标存放路径，默认为空。
使用示例：需要自定义节点图标时使用
js
import { createApp } from "vue";
import BpmnBuilder from "@easyui/bpmn-builder";
import "@easyui/bpmn-builder/index.css";
import App from "./App.vue";

const app = createApp(App);

app.use(BpmnBuilder, {
  extIconPath: "/src/assets/node-icons",
});
app.mount("#app");

自定义注册节点 ​

  • 配置项: nodeStencils: BpmnNodeStencil[]
  • 描述: 用于新增自定义节点或修改内置节点参数，默认为空。
ts
type BpmnNodeShape = "bpmn-task" | "bpmn-gateway" | "bpmn-event-basic" | "bpmn-event-intermediate" | 
                     "bpmn-event-boundary" | "bpmn-subprocess" | "bpmn-loop";

interface BpmnNodeStencil {
  label: string;             // 节点标签
  name: string;              // 节点名称（节点类型，唯一值）
  shape: BpmnNodeShape;      // 节点形状
  color: string;             // 节点颜色（节点模板列表中显示的节点颜色）
  image?: string;            // 节点图标名称（自定义图标时，图标路径使用 `extIconPath` 配置项声明）
  sort?: number;             // 节点排序（用于节点模板列表排序）
}
使用示例：需要自定义节点图标时使用
ts
import { createApp } from "vue";
import BpmnBuilder from "@easyui/bpmn-builder";
import "@easyui/bpmn-builder/index.css";
import "@example/assets/style.scss";
import App from "./App.vue";

const app = createApp(App);

app.use(BpmnBuilder, {
  extIconPath: "/src/assets/node-icons",
  nodeStencils: [
    // 修改内置节点参数
    { name: "task-service", image: "task-server" },
    // 新增自定义节点
    { label: "邮件任务", name: "task-email", shape: "bpmn-task", color: "#337ecc", image: "task-email" }
  ]
});
app.mount("#app");

内置节点 ​

编辑器提供了基本的内置节点，配置项参数如下：

ts
defaultNodes: BpmnNodeStencil[] = [
  { label: "开始事件", name: "event-start", shape: "bpmn-event-basic", color: "#529b2e", image: "event-start" },
  { label: "结束事件", name: "event-over", shape: "bpmn-event-basic", color: "#c45656", image: "event-over" },

  { label: "用户任务", name: "task-user", shape: "bpmn-task", color: "#337ecc", image: "task-user" },
  { label: "服务任务", name: "task-service", shape: "bpmn-task", color: "#337ecc", image: "task-service" },

  { label: "条件网关", name: "gateway-exclude", shape: "bpmn-gateway", color: "#e6a23c", image: "gateway-exclude" },
  { label: "并行网关", name: "gateway-parallel", shape: "bpmn-gateway", color: "#e6a23c", image: "gateway-parallel" },
  { label: "选择网关", name: "gateway-branched", shape: "bpmn-gateway", color: "#e6a23c", image: "gateway-branched" },
  { label: "合流网关", name: "gateway-confluent", shape: "bpmn-gateway", color: "#e6a23c", image: "gateway-confluent" },

  { label: "中间捕获事件", name: "intermediate-capture", shape: "bpmn-event-intermediate", color: "#a961e5", image: "event-capture" },
  { label: "中间升级事件", name: "intermediate-escalation", shape: "bpmn-event-intermediate", color: "#a961e5", image: "event-escalation" },
  { label: "中间异常事件", name: "intermediate-exception", shape: "bpmn-event-intermediate", color: "#a961e5", image: "event-exception" },

  { label: "边界捕获事件", name: "boundary-capture", shape: "bpmn-event-boundary", color: "#ff5500", image: "event-capture" },
  { label: "边界升级事件", name: "boundary-escalation", shape: "bpmn-event-boundary", color: "#ff5500", image: "event-escalation" },
  { label: "边界异常事件", name: "boundary-exception", shape: "bpmn-event-boundary", color: "#ff5500", image: "event-exception" },

  { label: "外部子流程", name: "subprocess-fold", shape: "bpmn-subprocess", color: "#4e5969", image: "subprocess-fold" },
  { label: "内部子流程", name: "subprocess-unfold", shape: "bpmn-loop", color: "#4e5969" }
];