简介
react-js-diagrams-wdelete 是一个基于 React 的开源流程图库，它提供了易于使用的 API，可以帮助开发者快速构建符合自己需求的流程图并进行交互。
该库在原版的 react-js-diagrams 的基础上增加了删除节点的功能，方便用户在流程图中进行快速的节点删除操作。
安装
使用 npm 安装该包：
npm install react-js-diagrams-wdelete --save
使用
组件引入
import * as React from 'react';
import { Diagram, NodeModel } from 'react-js-diagrams-wdelete';组件使用
使用该库提供的组件 Diagram 可以在页面上渲染出一个流程图，该组件的 props 可以设置外观、行为、事件等多种类型。
-- -------------------- ---- -------
----- --- ------- --------------- -
------------------ -
-------------
------------------ - --- -----------------
---------- - -
------ -
--- --------------- --- ------------------
--- --------------- --- ------------------
--- --------------- --- -------------------
--
--
-
-------- -
------ -
---- --------------- ---------
--------
----------------------------------
------------------------
--
------
--
-
-基础 API
该库提供了一组易于使用的 API，可以创建、更新和删除流程图节点。
-- -------------------- ---- ------- ----- ------- - --- --------------- --- -------------------- -- ---- ------------------------------------ -- ---- --------- -- ---- --------------------------------------- -- ---- ---------------------------------------
事件监听
该库提供了一组事件监听机制，可以监听节点的拖拽、链接、删除等操作。
-- -------------------- ---- -------
----- --- ------- --------------- -
------------------ -
-------------
------------------ - --- -----------------
---------- - -
------ -
--- --------------- --- ------------------
--- --------------- --- ------------------
--- --------------- --- -------------------
--
--
--------------------------------
---------- ------ -- -
----------------- ------- ------
--
------------ ------ -- -
----------------- --------- ------
--
------------- ------ -- -
----------------- ---------- ------
--
---------- ------ -- -
----------------- ------- ------
--
----------------- ------ -- -
----------------- ----- --------- ------
--
----------------- -- -- -
------------------- --- ----------
--
---
-
-------- -
------ -
---- --------------- ---------
--------
----------------------------------
------------------------
--
------
--
-
-示例代码
完整示例代码：
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - -------- --------- - ---- ----------------------------
----- --- ------- --------------- -
------------------ -
-------------
------------------ - --- -----------------
---------- - -
------ -
--- --------------- --- ------------------
--- --------------- --- ------------------
--- --------------- --- -------------------
--
--
--------------------------------
---------- ------ -- -
----------------- ------- ------
--
------------ ------ -- -
----------------- --------- ------
--
------------- ------ -- -
----------------- ---------- ------
--
---------- ------ -- -
----------------- ------- ------
--
----------------- ------ -- -
----------------- ----- --------- ------
--
----------------- -- -- -
------------------- --- ----------
--
---
-
------------- - -- -- -
----- ------- - --- --------------- --- --------------------
------------------------------------
---------------
------ --------------------- ---------
---
-
---------------- - -- -- -
----- ----------- - -----------------------
-------------------------------------------
---------------
------ ----------------------
---
-
---------------- - -- -- -
----- ------------ - --------------------
-------------- -- ----
--------------------------------------------
---------------
------ ----------------------
---
-
-------- -
------ -
---- --------------- ---------
---- --------------------- ---------
------- ------------------------------------------
------- ---------------------------------------------
------- ---------------------------------------------
------
--------
----------------------------------
------------------------
--
------
--
-
-
------ ------- ----总结
本文介绍了 react-js-diagrams-wdelete 的基本使用方法和 API，包括创建流程图节点、监听事件和外观设置等。同时，该库增加了删除节点的功能，方便用户在流程图中进行快速的节点删除操作。希望本文对开发者在使用这个库时提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734f890c4f7277583864