{"id":20542217,"url":"https://github.com/weivea/btree-view","last_synced_at":"2026-06-05T17:31:18.339Z","repository":{"id":83301893,"uuid":"325154665","full_name":"weivea/btree-view","owner":"weivea","description":"二叉树形式的流程图","archived":false,"fork":false,"pushed_at":"2020-12-29T01:42:06.000Z","size":82,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-16T15:24:44.249Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/weivea.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-29T01:20:16.000Z","updated_at":"2020-12-29T01:42:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"fddbc652-fb71-4bdd-a107-8e8203d09eb1","html_url":"https://github.com/weivea/btree-view","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weivea%2Fbtree-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weivea%2Fbtree-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weivea%2Fbtree-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weivea%2Fbtree-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weivea","download_url":"https://codeload.github.com/weivea/btree-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242147208,"owners_count":20079503,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T01:29:50.015Z","updated_at":"2025-12-03T17:03:37.581Z","avatar_url":"https://github.com/weivea.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# btree-view\n\n用于流程引擎flow 的 二叉树展示交互，根据json数据自动排版生成二叉树结构图 (基于svg)\n\n\n## install\n\n```\nnpm install -S git+https://github.com/weivea/btree-view.git\n```\n\n## useage:\n\n```javascript\nimport BTreeView from 'btree-view';\nconst _tr_color = Symbol('color');\nconst _tr_bg_color = Symbol('bgcolor');\ninterface Node {\n  tradeNodeId: number;\n  tradeNodeInstanceId: string;\n  tradeNodeInstanceName: string;\n  Necessary?: boolean;\n  BelongToGroup?: string;\n  failTradeNode?: Node;\n  successTradeNode?: Node;\n  [_tr_color]?: string;\n  [_tr_bg_color]?: string;\n}\n\nlet tree = new BTreeView\u003cNode\u003e({\n  id: 'flow-view',\n  colorKey: _tr_color,\n  bgColorKey: _tr_bg_color,\n});\n\ntree.loadTree({\n  tradeNodeId: 10000009,\n  tradeNodeInstanceId: '4_10000009_1',\n  tradeNodeInstanceName: '业务结果更新',\n  Necessary: false,\n  [_tr_bg_color]: '#0033ff',\n  [_tr_color]: '#ddd',\n  BelongToGroup: 'creditContract',\n  failTradeNode: {\n    tradeNodeId: 10000003,\n    tradeNodeInstanceId: '4_10000003_24',\n    tradeNodeInstanceName: '交易对账通知',\n    Necessary: false,\n    successTradeNode: {\n      tradeNodeId: 10000009,\n      tradeNodeInstanceId: '4_10000009_1',\n      tradeNodeInstanceName: '业务结果更新',\n      Necessary: false,\n      BelongToGroup: 'creditContract',\n      failTradeNode: {\n        tradeNodeId: 10000003,\n        tradeNodeInstanceId: '4_10000003_24',\n        tradeNodeInstanceName: '交易对账通知',\n        Necessary: false,\n      },\n      successTradeNode: {\n        tradeNodeId: 32,\n        tradeNodeInstanceId: '4_32_1',\n        tradeNodeInstanceName: '订单更新',\n        Necessary: true,\n      },\n    },\n  },\n  successTradeNode: {\n    tradeNodeId: 32,\n    tradeNodeInstanceId: '4_32_1',\n    tradeNodeInstanceName: '订单更新',\n    Necessary: true,\n    successTradeNode: {\n      tradeNodeId: 10000009,\n      tradeNodeInstanceId: '4_10000009_1',\n      tradeNodeInstanceName: '业务结果更新',\n      Necessary: false,\n      BelongToGroup: 'creditContract',\n      failTradeNode: {\n        tradeNodeId: 10000003,\n        tradeNodeInstanceId: '4_10000003_24',\n        tradeNodeInstanceName: '交易对账通知',\n        Necessary: false,\n      },\n      successTradeNode: {\n        tradeNodeId: 32,\n        tradeNodeInstanceId: '4_32_1',\n        tradeNodeInstanceName: '订单更新',\n        Necessary: true,\n      },\n    },\n  },\n});\n\n\nsetTimeout(()=\u003e{\n  tree.loadTree({\n    tradeNodeId: 10000009,\n    tradeNodeInstanceId: '4_10000009_1',\n    tradeNodeInstanceName: '业务结果更新',\n    Necessary: false,\n    [_tr_bg_color]: '#00ff33',\n    [_tr_color]: '#ddd',\n    BelongToGroup: 'creditContract',\n    failTradeNode: {\n      tradeNodeId: 10000003,\n      tradeNodeInstanceId: '4_10000003_24',\n      tradeNodeInstanceName: '交易对账通知',\n      Necessary: false,\n      successTradeNode: {\n        tradeNodeId: 10000009,\n        tradeNodeInstanceId: '4_10000009_1',\n        tradeNodeInstanceName: '业务结果更新',\n        Necessary: false,\n        BelongToGroup: 'creditContract',\n        failTradeNode: {\n          tradeNodeId: 10000003,\n          tradeNodeInstanceId: '4_10000003_24',\n          tradeNodeInstanceName: '交易对账通知',\n          Necessary: false,\n        },\n        successTradeNode: {\n          tradeNodeId: 32,\n          tradeNodeInstanceId: '4_32_1',\n          tradeNodeInstanceName: '订单更新',\n          Necessary: true,\n        },\n      },\n    },\n    successTradeNode: {\n      tradeNodeId: 32,\n      tradeNodeInstanceId: '4_32_1',\n      tradeNodeInstanceName: '订单更新',\n      Necessary: true,\n      successTradeNode: {\n        tradeNodeId: 10000009,\n        tradeNodeInstanceId: '4_10000009_1',\n        tradeNodeInstanceName: '业务结果更新',\n        Necessary: false,\n        BelongToGroup: 'creditContract',\n        failTradeNode: {\n          tradeNodeId: 10000003,\n          tradeNodeInstanceId: '4_10000003_24',\n          tradeNodeInstanceName: '交易对账通知',\n          Necessary: false,\n        },\n        successTradeNode: {\n          tradeNodeId: 32,\n          tradeNodeInstanceId: '4_32_1',\n          tradeNodeInstanceName: '订单更新',\n          Necessary: true,\n        },\n      },\n    },\n  });\n},3000)\ntree.onNodeClict((node: Node) =\u003e {\n  console.log(node);\n});\n\n\n\n// 对象清理\n// tree.destroyed();\n\n\n(window as any).tree = tree;\n\n\n```\n\n![图片](./pic.png)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweivea%2Fbtree-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweivea%2Fbtree-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweivea%2Fbtree-view/lists"}