在前端开发中，我们常常需要使用 BPMN 语言来描述各种业务流程，同时也需要通过活动、用户任务和网关等元素来描述流程中的各个阶段和执行步骤。npm 包 bpmn-js-properties-panel-activiti-support 就是在此背景下产生的一款基于 bpmn-js 的 npm 包，它提供了一些支持 Activiti 自定义扩展属性的面板，使我们能够在 BPMN 编辑器中方便地添加和编辑各种扩展属性。在本篇文章中，我们将详细介绍如何使用该 npm 包进行前端开发。
使用 npm 安装 bpmn-js-properties-panel-activiti-support
在开始使用 bpmn-js-properties-panel-activiti-support 前，我们需要保证已经安装好了 node.js 和 npm，如果没有安装，请先安装好。
使用 npm 安装 bpmn-js-properties-panel-activiti-support 只需要执行以下命令即可:
npm install bpmn-js-properties-panel-activiti-support
安装完成后，我们可以在 package.json 文件中看到已经添加了该包的依赖信息：
{
"dependencies": {
"bpmn-js-properties-panel-activiti-support": "^0.3.0"
}
}在前端项目中使用 bpmn-js-properties-panel-activiti-support
安装完成后，我们需要在前端项目中引用该包并进行相关配置。
导入 bpmn-js-properties-panel-activiti-support
在需要使用 bpmn-js-properties-panel-activiti-support 的文件中，我们需要先引入该包：
import PropertiesPanelActivitiSupportModule from 'bpmn-js-properties-panel-activiti-support'; // 引入 bpmn-js 的主组件 import BpmnModeler from 'bpmn-js/lib/Modeler'; // 同时也需要引用 bower_components 中的 jquery、lodash 和 bpmn-js-properties-panel
扩展 bpmn-js 的面板配置
接着，我们需要在 bpmn-js 的配置中添加该包的配置信息，以便在编辑器中显示该扩展面板，具体需要配置的信息有如下几个部分：
1. module.imports
在 module.imports 中需要引入 bpmn-js-properties-panel 和 bpmn-js-properties-panel-activiti-support，同时也需要在该变量定义中添加 bpmnjs.properties-panel 和 bpmnjs.properties-panel-activiti-support 的别名，以便在后面的配置中使用。
-- -------------------- ---- -------
--- --------------- - -
-----
--
--- ----------------- - -
------------------------------------
--
--- ----------- - --- -------------
-----
------------------
----------------- -
-----
--
-- ----
---------------- -
------- -----------------------
-- ----
------------------ -
-
-- ------------------------ ---
------- -------------------
-- ------------------------ ---
----- --------------------------------
-- ---------------------- ------------------------ --------
------------------- -----------------
--
-
-- ----------------------------------------- ---
------- ------------------------------------
-- ----------------------------------------- ---
----- -------------------------------------------------
------------------- -----------------
-
--
-- ---------
------------------- -
-----
--
-----
--
-----
-2. propertiesProvider
在 propertiesProvider 中定义每个元素的扩展属性面板信息，包括每个元素的 ID、elementName、provider 和 descriptor 等属性，设置这些属性后，我们就可以在编辑面板中显示出扩展属性面板，默认情况下不显示。
-- -------------------- ---- -------
--- --------------- - -
-----
--
--- ----------------- - -
------------------------------------
--
--- ----------- - --- -------------
-----
------------------
----------------- -
-----
--
-----
---------------- -
------- -----------------------
------------------ -
-----
--
-- -- --------------------------------
------------------- -
-- --------------
--------------- -
----------- -
-
-- ------- --
--- -------
-- ---------
----- -----
-- --------------
--------- -
-- --
-------- -
-- ----
-
--- ------------
------ -------
-- -----------
-------------- -------
-- --- ---- ----
----- -
-- ------- ----- ---
----- --------
-- ---------
------------ -------
-- -------------
-------- -
----- -------
----- -----------
----------- ---------
-
-
-
-
-
-
-
--
-----
--
-----
--
-----
--在编辑中使用扩展属性面板
在完成以上配置后，我们即可在 bpmn-js 编辑中使用扩展属性面板。
例如，在某个元素上右键单击，弹出弹出菜单后，单击 “Edit” 可以看到显示了新添加的属性面板。
-- -------------------- ---- -------
-- ---
-- ----
---------------------------------------------- -
-- -------------------------- -
------------- - -------------
------------------------------
-
------ ------
---
-----
---
- ------
- ------ ------ -- -- ---- -- --
--
-------- ------------- -
----- - -----------
--- ----- - ----- - ----------------------
-- -------- -
----- - ------------
------ -----------------------------
-----
---
- ---- -
-------------
-
-完整示例代码
下面是一个完整的示例，包括了 BpmnModeler 的配置和添加事件：
-- -------------------- ---- -------
------ ------ ---- ---------
------ ----------- ---- ----------------------
------ --------------------- ---- ---------------------------
------ ------------------------------------ ---- --------------------------------------------
------ ---- ---- -------
------ -
--------
- ---- ---------
------------- - -------
----- --------- - ----------------------------------
----- ------------------------ - -----------------------------------------------
-- ------- ------
----- ----------------- - -
----------------------
------------------------------------
--
-- ------- ------ -------------
----- --------------- - -
------------- --------
---------- -------
---------- -------
------------ -----
---------------- -----
------------- -------
----------- -------
--------------- ------
--
-- --- -------
----- ----------- - ------ ------------- ---------------- ---------------------------------- -------------------------------------------------------- ------------------------------------------------------- ------------------------------------------------- ------------------------------------------------- ------------------ ---------------------------------------------------------- -------------- ------------------------------------- ----------------------------------------------------- ------------------------------------ ---------------- ----------------------------------------- ---------------------------- ------------------------------------- ------- ------- ---------- ---------------------------------------------------------------------------------------------
----- ----------------------- - ------------------ -----------------
----- ------- - --- -------------
---------- ----------
---------------- -
-- --------------
------- -----------------------
------------------ -
------------------------------------
--
------------------- -
----------- -
------ ----------
----------- -
-
--- -------
----- -----
------------ -------
------- --------------
----- -
----- --------
-------- -
----- -------
----- -----------
----------- ---------
-
-
-
-
--
----- -
------ -------
----------- -
-
--- ---------------
------------ ---- --- ---- -- --- ---------
------ -------- ------
----- ---------
------ --- ---------
--------- -----
-------- -
----- -----------
----- -------
----------- ----------
-
-
-
--
--------- -
------ -----------
----------- -
-
--- -------------
------ -------- ----
----- ---------
------ ---
------ ------------------
------------ ---- ---------- ----
--------- -----
-------- -
----- -----------
----- ---------------------
----------- ----------
-
--
-
--- ---------------------
------ ---------- ----------
----- --------
------------ ---------- ----------
------ ------------------
--------- -----
-------- -
----- -----------
----- -----------------------------
----------- ----------
--
-------------- -
-
----- ----- -------
------ -------
--
-
----- -------------
------ ------------
--
-
----- --------- ------------
------ --------------------
-
-
-
-
-
-
--
------------------ -
----
--
----------------- -
-- ---
--
-- ------
-- ---
---
-- ---
-------- ------------------------------------ ------- --- -------- -
----- ----------- - ------------ -----
------------------------------ -
--------------------------------- ---------- -
----- ---- - -------------------------
-- ----- ---- ---------- -- --- -----
-- --------- --- -------- -- --------
----------------- -----------
---
---
-
----------------------------
-------- ------------------------
---------------- -
--------------------- ---- -
-- ----- -
-------------------- -----
-
---
-
--
-------- ------------- -
----------------- ------- ---- -- ------------- ---- -
--------- -----
---
-
-------- ------------------ -
-------------------------
-
-------- ---------------- -
---------------------- ------------- -
-- ----- -
-------------------
- ---- -
-------------------------
-
---
-
-------- ------------ -
-- --------- -- --------- --- -- -- - - --- -
--------------------- ---- -
-- ----- -
--------------------- -- ---- ----- -----
- ---- -
----------------- --------
-
---
--------------------
-------------------
-
-
------------------------------------ -----------
--------------------------------------------- ---------- -
-------------------
---总结
本文主要介绍了如何使用 npm 包 bpmn-js-properties-panel-activiti-support 进行前端开发，并通过详细的示例代码展示了如何在 BpmnModeler 中添加扩展面板配置，同时也提供了关于该 npm 包使用的深度指导意义。相信读者在学习过程中已经掌握了该 npm 包的使用方法，能够在实际开发中灵活使用该 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673dffb81d47349e53c40