Skip to content

Topology-react 是一款开源的基于canvas+javascript+react的绘图引擎 example 🎉

License

Notifications You must be signed in to change notification settings

nnnnnnnnnni/topology-react

 
 

Repository files navigation

topology-react

什么是topology?

topology是一款开源的基于canvas+typescript的绘图引擎,可用于实现软件架构图、微服务部署结构图、流程图、活动图、类图、时序图、SCADA等;我们也可以按照自己的想法实现任何我们想要的图形库.

为什么要有topology-react?

topology-react是一个零侵入式(指的是数据层)的基于topology编写的example, 它可以很方便地集成到其他react项目中。

💡技术栈(主要)

  • react 16.13.1
  • antd 3.26.7
  • react-router-dom 5.2.0
  • @topology/activity-diagram 0.2.24
  • @topology/chart-diagram 0.2.24
  • @topology/class-diagram 0.2.24
  • @topology/core 0.2.26
  • @topology/flow-diagram 0.2.24
  • @topology/sequence-diagram 0.2.24

🎉 愿景

  1. 基于topology完成react版本的最佳实践。
  2. topology-react能够很简单的与其他系统完成融合。

🏷️ 开发进程

  • 自定义iconfont示例
  • 自定义图片示例
  • 支持新建文件, 打开文件, 导出json, 保存png与svg
  • 丰富画布右侧元素属性区域的外观属性(位置大小边距, 边框样式, 字体样式)
  • 显示画布元素的数据属性(比如Id)
  • 支持node节点自定义数据字段
  • 顶部新增预览功能
  • 顶部新增锁定功能
  • 新增自动排版功能
  • 新增在线图片添加功能
  • 新增自定义事件功能
  • 新增网格背景开关功能
  • 新增websocket和MQTT功能
  • 预览界面新增自动适应窗口大小功能
  • 未完待续...

🤝 提交规范

  • perf: 优化相关,比如提升性能、体验
  • feat: 新功能(feature)
  • fix: 修补 bug
  • docs: 文档(documentation)
  • style: 格式(不影响代码运行的变动)
  • refactor: 重构(即不是新增功能,也不是修改 bug 的代码变动)
  • test: 增加测试
  • chore: 构建过程或辅助工具的变动
  • upgrade: 第三方库升级
  • revert: 回滚
  • scope: commit 影响的范围, 比如: route, component, utils, build...
  • merge: Merge branch ? of ?.

❤️ 分支管理

  • 模块功能开发(feature/xxx)
  • Bug 修改(bug/xxx)

🚨 其他注意事项

  • 项目合并到master会自动发布。如果代码有warning将会发布失败。
  • 项目不允许使用redux或者其他的数据流方案, 可以使用useReducer。
  • 代码中尽量编写注释, 标明函数的作用。

FAQ

About

Topology-react 是一款开源的基于canvas+javascript+react的绘图引擎 example 🎉

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 96.9%
  • HTML 1.6%
  • CSS 1.5%