{"id":16958582,"url":"https://github.com/summer-andy/topology-react","last_synced_at":"2025-03-17T08:37:33.926Z","repository":{"id":53001262,"uuid":"285460412","full_name":"Summer-andy/topology-react","owner":"Summer-andy","description":"Topology-react 是一款开源的基于canvas+javascript+react的绘图引擎 example 🎉","archived":true,"fork":false,"pushed_at":"2021-08-22T06:56:16.000Z","size":2269,"stargazers_count":112,"open_issues_count":4,"forks_count":48,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-08T02:29:24.675Z","etag":null,"topics":["canvas","react"],"latest_commit_sha":null,"homepage":"http://139.196.82.33:8083/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Summer-andy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-06T03:09:29.000Z","updated_at":"2024-11-26T09:41:16.000Z","dependencies_parsed_at":"2022-09-08T03:22:42.698Z","dependency_job_id":null,"html_url":"https://github.com/Summer-andy/topology-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Summer-andy%2Ftopology-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Summer-andy%2Ftopology-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Summer-andy%2Ftopology-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Summer-andy%2Ftopology-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Summer-andy","download_url":"https://codeload.github.com/Summer-andy/topology-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244001630,"owners_count":20381805,"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":["canvas","react"],"created_at":"2024-10-13T22:43:00.384Z","updated_at":"2025-03-17T08:37:33.577Z","avatar_url":"https://github.com/Summer-andy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## topology-react\n\n### 什么是topology?\n\n   [topology](https://www.yuque.com/alsmile/topology/about)是一款开源的基于canvas+typescript的绘图引擎，可用于实现软件架构图、微服务部署结构图、流程图、活动图、类图、时序图、SCADA等;我们也可以按照自己的想法实现任何我们想要的图形库.\n\n### 为什么要有topology-react？\n\n   topology-react是一个零侵入式(指的是数据层)的基于topology编写的example, 它可以很方便地集成到其他react项目中。\n   \n### 拓展阅读\n  - [基于React+Topology构建在线绘图工具](https://juejin.cn/post/6888473068876857357)\n  - [React+Topology在线绘图工具支持UI组件啦](https://juejin.cn/post/6917020125765828615)\n  - [Topology在线绘图工具支持事件与图表组件交互](https://juejin.cn/post/6919754781850337294)\n  - [基于Topology构建报表看板和列表查询界面](https://juejin.cn/post/6922615053120339982)\n\n\n### 💡技术栈(主要)\n\n  - react 16.13.1\n  - antd 3.26.7\n  - react-router-dom 5.2.0\n  - @topology/activity-diagram  0.2.24\n  - @topology/chart-diagram  0.2.24\n  - @topology/class-diagram  0.2.24\n  - @topology/core 0.2.26\n  - @topology/flow-diagram  0.2.24\n  - @topology/sequence-diagram  0.2.24\n\n### 🎉  愿景\n\n  1. 基于topology完成react版本的最佳实践。\n  2. topology-react能够很简单的与其他系统完成融合。\n\n### 🏷️ 开发进程\n  - [x] 自定义iconfont示例\n  - [x] 自定义图片示例\n  - [x] 支持新建文件, 打开文件, 导出json, 保存png与svg\n  - [x] 丰富画布右侧元素属性区域的外观属性(位置大小边距, 边框样式, 字体样式)\n  - [x] 显示画布元素的数据属性(比如Id)\n  - [x] 支持node节点自定义数据字段\n  - [x] 顶部新增预览功能\n  - [x] 顶部新增锁定功能\n  - [x] 新增自动排版功能\n  - [x] 新增在线图片添加功能\n  - [x] 新增自定义事件功能\n  - [x] 新增网格背景开关功能\n  - [x] 新增websocket和MQTT功能\n  - [x] 预览界面新增自动适应窗口大小功能\n  - [x] 新增节点动画\n  - [ ] 未完待续...\n\n\n### 🤝 提交规范\n\n- perf: 优化相关，比如提升性能、体验\n- feat: 新功能(feature)\n- fix: 修补 bug\n- docs: 文档(documentation)\n- style: 格式(不影响代码运行的变动)\n- refactor: 重构(即不是新增功能，也不是修改 bug 的代码变动)\n- test: 增加测试\n- chore: 构建过程或辅助工具的变动\n- upgrade: 第三方库升级\n- revert: 回滚\n- scope: commit 影响的范围, 比如: route, component, utils, build...\n- merge: Merge branch ? of ?.\n\n\n### ❤️ 分支管理\n\n- 模块功能开发(feature/xxx)\n- Bug 修改(bug/xxx)\n\n### 🚨 其他注意事项\n\n - 项目合并到master会自动发布。如果代码有warning将会发布失败。\n - 项目不允许使用redux或者其他的数据流方案, 可以使用useReducer。\n - 代码中尽量编写注释, 标明函数的作用。\n\n\n ### FAQ\n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsummer-andy%2Ftopology-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsummer-andy%2Ftopology-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsummer-andy%2Ftopology-react/lists"}