https://github.com/weivea/btree-view
二叉树形式的流程图
https://github.com/weivea/btree-view
Last synced: 15 days ago
JSON representation
二叉树形式的流程图
- Host: GitHub
- URL: https://github.com/weivea/btree-view
- Owner: weivea
- Created: 2020-12-29T01:20:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-29T01:42:06.000Z (over 5 years ago)
- Last Synced: 2025-01-16T15:24:44.249Z (over 1 year ago)
- Language: TypeScript
- Size: 80.1 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# btree-view
用于流程引擎flow 的 二叉树展示交互，根据json数据自动排版生成二叉树结构图 (基于svg)
## install
```
npm install -S git+https://github.com/weivea/btree-view.git
```
## useage:
```javascript
import BTreeView from 'btree-view';
const _tr_color = Symbol('color');
const _tr_bg_color = Symbol('bgcolor');
interface Node {
tradeNodeId: number;
tradeNodeInstanceId: string;
tradeNodeInstanceName: string;
Necessary?: boolean;
BelongToGroup?: string;
failTradeNode?: Node;
successTradeNode?: Node;
[_tr_color]?: string;
[_tr_bg_color]?: string;
}
let tree = new BTreeView({
id: 'flow-view',
colorKey: _tr_color,
bgColorKey: _tr_bg_color,
});
tree.loadTree({
tradeNodeId: 10000009,
tradeNodeInstanceId: '4_10000009_1',
tradeNodeInstanceName: '业务结果更新',
Necessary: false,
[_tr_bg_color]: '#0033ff',
[_tr_color]: '#ddd',
BelongToGroup: 'creditContract',
failTradeNode: {
tradeNodeId: 10000003,
tradeNodeInstanceId: '4_10000003_24',
tradeNodeInstanceName: '交易对账通知',
Necessary: false,
successTradeNode: {
tradeNodeId: 10000009,
tradeNodeInstanceId: '4_10000009_1',
tradeNodeInstanceName: '业务结果更新',
Necessary: false,
BelongToGroup: 'creditContract',
failTradeNode: {
tradeNodeId: 10000003,
tradeNodeInstanceId: '4_10000003_24',
tradeNodeInstanceName: '交易对账通知',
Necessary: false,
},
successTradeNode: {
tradeNodeId: 32,
tradeNodeInstanceId: '4_32_1',
tradeNodeInstanceName: '订单更新',
Necessary: true,
},
},
},
successTradeNode: {
tradeNodeId: 32,
tradeNodeInstanceId: '4_32_1',
tradeNodeInstanceName: '订单更新',
Necessary: true,
successTradeNode: {
tradeNodeId: 10000009,
tradeNodeInstanceId: '4_10000009_1',
tradeNodeInstanceName: '业务结果更新',
Necessary: false,
BelongToGroup: 'creditContract',
failTradeNode: {
tradeNodeId: 10000003,
tradeNodeInstanceId: '4_10000003_24',
tradeNodeInstanceName: '交易对账通知',
Necessary: false,
},
successTradeNode: {
tradeNodeId: 32,
tradeNodeInstanceId: '4_32_1',
tradeNodeInstanceName: '订单更新',
Necessary: true,
},
},
},
});
setTimeout(()=>{
tree.loadTree({
tradeNodeId: 10000009,
tradeNodeInstanceId: '4_10000009_1',
tradeNodeInstanceName: '业务结果更新',
Necessary: false,
[_tr_bg_color]: '#00ff33',
[_tr_color]: '#ddd',
BelongToGroup: 'creditContract',
failTradeNode: {
tradeNodeId: 10000003,
tradeNodeInstanceId: '4_10000003_24',
tradeNodeInstanceName: '交易对账通知',
Necessary: false,
successTradeNode: {
tradeNodeId: 10000009,
tradeNodeInstanceId: '4_10000009_1',
tradeNodeInstanceName: '业务结果更新',
Necessary: false,
BelongToGroup: 'creditContract',
failTradeNode: {
tradeNodeId: 10000003,
tradeNodeInstanceId: '4_10000003_24',
tradeNodeInstanceName: '交易对账通知',
Necessary: false,
},
successTradeNode: {
tradeNodeId: 32,
tradeNodeInstanceId: '4_32_1',
tradeNodeInstanceName: '订单更新',
Necessary: true,
},
},
},
successTradeNode: {
tradeNodeId: 32,
tradeNodeInstanceId: '4_32_1',
tradeNodeInstanceName: '订单更新',
Necessary: true,
successTradeNode: {
tradeNodeId: 10000009,
tradeNodeInstanceId: '4_10000009_1',
tradeNodeInstanceName: '业务结果更新',
Necessary: false,
BelongToGroup: 'creditContract',
failTradeNode: {
tradeNodeId: 10000003,
tradeNodeInstanceId: '4_10000003_24',
tradeNodeInstanceName: '交易对账通知',
Necessary: false,
},
successTradeNode: {
tradeNodeId: 32,
tradeNodeInstanceId: '4_32_1',
tradeNodeInstanceName: '订单更新',
Necessary: true,
},
},
},
});
},3000)
tree.onNodeClict((node: Node) => {
console.log(node);
});
// 对象清理
// tree.destroyed();
(window as any).tree = tree;
```
